CSS Gradient Generator Guide: Linear, Radial & Conic Gradients

How to Use the Gradient Generator

0. Pick a preset (optional)

The preset strip at the top shows 16 curated gradients — Twilight, Sunset, Ocean, Fire, Midnight, Neon, Cosmic, and more — as small swatches. Click any to instantly load its type, angle, and color stops. Use presets as a starting point, then adjust from there.

1. Choose a gradient type

Select Linear, Radial, or Conic from the type toggle:

• Linear — color transitions along a straight line at any angle (0–360°)
• Radial — color radiates outward from the center of the element
• Conic — color sweeps around a center point from a configurable start angle

2. Set the angle (linear and conic)

Drag the Rotation Angle / Start Angle slider to control direction. For linear gradients, 0° is bottom-to-top, 90° is left-to-right, 135° is the classic diagonal. For conic gradients, this sets where the sweep begins.

3. Configure color stops

Each stop has:

• A color picker — click to open the native browser color chooser
• A hex input — type a hex value like #2563eb directly to match brand colors exactly
• A position slider — drag to set where in the gradient this color appears (0–100%)

Click Add Stop to insert a new stop at the midpoint of the widest gap between existing stops (up to 5 total). Hover a stop and click the trash icon to remove it (minimum 2 required).

4. Direction quick-picks (linear)

For linear gradients, eight arrow buttons appear above the angle slider — ↑ ↗ → ↘ ↓ ↙ ← ↖ — each maps to a standard 45° increment (0°, 45°, 90° … 315°). Click one to snap to that direction instantly. The slider still lets you fine-tune to any angle between 0° and 360°.

5. Randomize

Click Randomize to generate new random colors for all current stops while keeping your stop count and positions intact.

6. CSS and Tailwind output

The output panel has two tabs:

• CSS — the ready-to-paste background: linear-gradient(...) declaration
• Tailwind — when the angle matches a standard direction and you have 2–3 stops, outputs bg-gradient-to-{direction} from-[#color] via-[#color] to-[#color]; otherwise outputs an arbitrary value like bg-[linear-gradient(135deg,#2563eb_0%,#7c3aed_100%)]

Click Copy on either tab to copy to clipboard.

7. Export PNG

Click Export PNG (1920×1080) to download the gradient as a high-resolution image using the browser's Canvas API. Works for all three gradient types. Useful for Figma imports, social media assets, or anywhere you need a raster image rather than CSS.

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. The generator outputs conic-gradient(from {angle}deg at center, ...) — set your start angle with the slider and add stops at any percentage position:

/* Generated by the tool — two-stop conic from 135° */
background: conic-gradient(from 135deg at center, #2563eb 0%, #7c3aed 100%);

/* Color wheel — hand-written with more stops */
background: conic-gradient(
    red, orange, yellow, green, blue, violet, red
);

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

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 (Hand-Written CSS)

The generator outputs standard hex-based gradients. If you find the midpoint looks muddy or desaturated — the "dead gray zone" problem common with blue→red or complementary colour transitions — you can add the in oklch interpolation hint manually after copying the CSS:

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

/* Perceptually smooth — add "in oklch" by hand after copying */
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 texture-based backgrounds that complement your gradients, our SVG Pattern Generator creates seamless geometric patterns you can layer under or over gradient overlays. 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.