CSS Gradient Generator: Linear, Radial and Conic

A CSS gradient generator builds the background value for a smooth blend between colours. Choose linear, radial or conic, drag the colour stops, set the angle, and copy CSS that works in every modern browser.

background: linear-gradient(90deg, #facc15 0%, #f472b6 100%);

How to use it

1. Pick a type. Linear blends along a line, Radial spreads out from a point, Conic sweeps round a point.
2. Edit the stops. Tap an empty part of the bar to add a stop there, then drag it into place. Tap a handle to select it, and change its colour in the box below: any CSS colour works, such as #f472b6, navy, rgb(0 0 0 / 50%) or oklch(70% 0.2 30). Remove deletes the selected stop; a gradient always keeps at least two.
3. Set the direction. Angle turns a linear gradient; Start angle turns a conic one. Radial and conic gradients also have a Centre, and radial ones a Shape.
4. Copy CSS. The line under the controls is ready to paste into a rule.

Or start from a preset and change it. On a keyboard, tab to a stop handle, move it with the arrow keys (Shift for steps of 10), and press Delete to remove it.

Everything runs in your browser. Nothing you make is uploaded.

The three gradient functions

/* Along a line, at an angle */
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
 
/* Out from a point: a circle or an ellipse */
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #93c5fd 40%, #1e3a8a 100%);
 
/* Round a point, like a clock hand */
background: conic-gradient(from 90deg, #ff0000 0%, #0000ff 100%);

Linear gradient. The angle is the direction of travel: 0deg goes up, 90deg goes right, and 180deg, the default, goes down. The gradient line is long enough that the first and last colours reach the corners at any angle.

Radial gradient. circle keeps the rings round; ellipse, the default, stretches them to the box's proportions. at 50% 30% moves the centre. By default the last stop lands on the farthest corner.

Conic gradient. Positions go round the centre rather than out from it, so 25% is a quarter turn. from 90deg rotates the start from the top to the right. Give the last stop the same colour as the first, as the Colour wheel preset does, or there is a visible seam at the top.

Colour stops

A stop is a colour and a position. The browser blends between neighbouring stops and holds the first and last colours out to the edges.

• Hard edges. Two stops on the same position switch colour with no blend. The Pie chart preset is three hard-edged slices: conic-gradient(#f472b6 0% 40%, #facc15 40% 70%, #38bdf8 70% 100%) is the short way to write the same thing.
• Fading to transparent. A stop with alpha fades whatever is behind it into view. The tool prints see-through stops as eight-digit hex (#000000cc), and the Fade out preset is the classic dark scrim for text over photos.
• Stops are drawn in position order. CSS clamps a stop that comes before the one ahead of it, so the tool always prints them sorted.

Smoother blends with in oklab

Blending in sRGB, the default, draws a straight line between two colours in RGB space. Between opposites, like blue and yellow, that line passes through grey, so the middle of the gradient looks muddy.

background: linear-gradient(90deg in oklab, blue, yellow);

in oklab tells the browser to blend in OKLab, a colour space built so equal steps look equal, and the middle stays bright. It is part of CSS Images Level 4 and works in every current browser. Switch Blend colours in to OKLab to compare. The Color Converter explains OKLab and OKLCH, and converts any stop colour to the other formats.

Gotchas

• A gradient is an image. background-color: linear-gradient(...) does nothing. Use background or background-image.
• Short elements show short gradients. A gradient sizes itself to the box. On body with little content it repeats in bands; give html a min-height: 100% or the element a height.
• Text on a gradient needs checking at both ends. Contrast changes along the gradient, so check your text against the lightest and the darkest stop in the Contrast Checker.
• Gradients cannot be transitioned directly. Animating from one gradient to another jumps. Animate background-position on an oversized gradient, or register a custom property with @property and animate that.
• No prefixes needed. -webkit-linear-gradient is legacy, and its angles run the other way. Leave it out.

Keep going

The Color Converter turns any stop colour into HEX, RGB, HSL and OKLCH, and the Contrast Checker tells you whether text on your gradient is readable. The CSS cheat sheet covers background and the rest of the properties a gradient sits beside. More free tools that run in your browser are on the tools page.

Common questions