CSS gradient generator
Shape a gradient visually, then copy CSS that works in every modern browser.
Sealed on this device
Runs in your browser. Nothing is uploaded.
Sealed
Preview
Color stops
Drag the stops, or select one and use the arrow keys. Click the bar to add a stop.
Settings
OKLCH and OKLab avoid the dull gray zone in the middle of some gradients. A standard version is included for older browsers.
CSS code
How it works
-
Choose a type
Pick a linear, radial or conic gradient, or start from a preset, and set its angle or center.
-
Edit the colors
Drag the color stops along the bar, click the bar to add more, and change each stop’s color and position.
-
Copy the CSS
Copy the generated code and paste it into your stylesheet as a background.
Frequently asked questions
What’s the difference between linear, radial and conic gradients?
A linear gradient changes color along a straight line at the angle you choose. A radial gradient spreads out from a center point in a circle or ellipse. A conic gradient sweeps around a center point, like the hands of a clock, which is handy for color wheels and pie charts.
Does the generated CSS work in all browsers?
Linear, radial and conic gradients work in all current browsers. When you choose OKLCH or OKLab blending, the code also includes a standard line first, so older browsers still show a gradient.
Why does my gradient look gray in the middle?
Blending two very different colors in the standard sRGB space often passes through a muddy gray. Switch the blending to OKLCH or OKLab: the colors are mixed the way the eye perceives them, so the middle stays bright.
Can I use transparent colors?
Yes. Type a color with transparency, such as rgb(52 66 217 / 0.4) or #3442d966, in a stop’s color field. It’s great for overlays on top of images.
How many color stops can I add?
As many as you need. Each stop can be moved with the mouse, by touch or with the arrow keys, and removed as long as two stops remain.