CSS Gradient Generator Guide: Linear, Radial & Conic Gradients

Why CSS Gradients Over Images

A background image (PNG or JPEG) for a gradient effect:

• Adds an HTTP request (or Base64 bloat)
• Has fixed resolution — blurs on high-DPI screens
• Can't be dynamically modified with CSS variables

A CSS gradient:

• Zero additional HTTP requests
• Resolution-independent — rendered by the GPU at any scale
• Modifiable with CSS custom properties and JavaScript
• Typically under 200 bytes of CSS

The Three Gradient Types

linear-gradient

Color transitions along a straight line:

/* Direction by keyword */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* Direction by angle */
background: linear-gradient(135deg, #3b82f6, #8b5cf6);

/* Multi-stop */
background: linear-gradient(
    135deg,
    #3b82f6 0%,
    #6366f1 40%,
    #8b5cf6 100%
);

radial-gradient

Color transitions outward from a center point:

/* Simple radial */
background: radial-gradient(circle, #3b82f6, #1e1b4b);

/* Positioned ellipse */
background: radial-gradient(
    ellipse 80% 50% at 20% 40%,
    #3b82f6 0%,
    transparent 100%
);

/* Spotlight effect */
background: radial-gradient(
    circle at 50% 0%,
    rgba(59, 130, 246, 0.4) 0%,
    transparent 60%
);

conic-gradient

Colors sweep around a center point, like a pie chart:

/* Color wheel */
background: conic-gradient(
    red, orange, yellow, green, blue, violet, red
);

/* Pie chart segments */
background: conic-gradient(
    #3b82f6 0deg 120deg,
    #8b5cf6 120deg 240deg,
    #ec4899 240deg 360deg
);

/* Checkerboard pattern */
background:
    conic-gradient(#000 90deg, transparent 90deg 180deg, #000 180deg 270deg, transparent 270deg)
    0 0 / 40px 40px;

Color Stops and Positioning

Color stops control exactly where transitions occur:

/* Even distribution (browser calculates) */
background: linear-gradient(to right, red, yellow, green);

/* Explicit positions */
background: linear-gradient(
    to right,
    red 0%,
    red 20%,       /* Hard stop — red until 20% */
    yellow 20%,    /* Instant transition at 20% */
    yellow 60%,
    green 60%,
    green 100%
);

/* Hint — control midpoint of transition */
background: linear-gradient(
    to right,
    blue 0%,
    30%,           /* Transition midpoint at 30% (not 50%) */
    purple 100%
);

Smooth Gradients with oklch

Traditional RGB/HSL gradients through gray in the middle — the "dead gray zone" problem:

/* Muddy gray in the middle (HEX interpolation) */
background: linear-gradient(to right, blue, red);

/* Perceptually smooth (oklch interpolation) */
background: linear-gradient(in oklch to right, blue, red);

The in oklch keyword uses a perceptually uniform color space for interpolation — transitions look visually even rather than passing through desaturated midpoints. Supported in Chrome 111+, Firefox 113+, Safari 16.4+.

Layered Gradients

CSS background accepts multiple gradient layers:

.hero {
    background:
        /* Overlay for text legibility */
        linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.7) 100%),
        /* Decorative radial highlight */
        radial-gradient(ellipse at 20% 20%, rgba(59,130,246,0.3), transparent 60%),
        /* Base gradient */
        linear-gradient(135deg, #1e1b4b, #312e81);
}

Layer order: first listed = top layer. Each layer's transparent areas reveal layers below.

Text Contrast Over Gradients

A gradient that goes from dark to light requires different text colors at each end. Test the contrast at the darkest and lightest points of the gradient separately with our Contrast Checker.

Solutions:

1. Overlay: add a semi-transparent dark overlay that maintains consistent contrast
2. Restrict text to the darkest region: use position to keep text where contrast is guaranteed
3. Text shadow: text-shadow: 0 1px 3px rgba(0,0,0,0.8) adds legibility at low contrast

CSS Custom Properties for Dynamic Gradients

:root {
    --gradient-start: #3b82f6;
    --gradient-end: #8b5cf6;
    --gradient-angle: 135deg;
}

.button {
    background: linear-gradient(
        var(--gradient-angle),
        var(--gradient-start),
        var(--gradient-end)
    );
}

/* Change on hover via JavaScript or :hover */
.button:hover {
    --gradient-angle: 180deg;
}

Performance

CSS gradients are rendered by the GPU as composited layers. They're fast. But backdrop-filter effects (used with glassmorphism) have significant GPU overhead — combine gradients with our Glass & Neumorphism Generator carefully on mobile where GPU is constrained.

For Base64-encoded SVG gradients that need to work as background-image URLs, use our Base64 Encoder. Format your gradient CSS with our CSS Formatter and use our Color Converter to work across color formats when building multi-stop palettes.