Linear with any angle, radial as a circle or ellipse from any corner or edge, and conic for color wheels and pie charts.
Color & CSS
CSS Gradient Generator
Design a gradient by eye and copy the CSS. Choose linear, radial, or conic, add color stops, and preview the result as you go.
Build itThe preview updates as you change things
Start from a preset
Type
Color stops
Preview and CSSCopy the CSS into your stylesheet
background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); background: linear-gradient(135deg in oklch, #06b6d4 0%, #3b82f6 100%);
What it handles
Gradients you can see before you ship them.
A good gradient takes trial and error. Seeing the result live, with the exact CSS beside it, makes that quick.
Turn on the OKLCH blend to avoid the dull, muddy band that some sRGB gradients get between two bright colors. The CSS includes a fallback for older browsers.
Begin from a preset or a random gradient, then adjust the stops, positions, and angle until it feels right.
Frequently asked questions
What does the OKLCH option do?
It tells the browser to blend the colors in the OKLCH color space instead of sRGB, which keeps colors lively through the middle of the gradient. Browsers that do not support it use the standard gradient on the line above.
How do I make a hard edge instead of a blend?
Give two stops the same position. The color changes sharply at that point, which is how stripes and split backgrounds are made.
How many color stops can I use?
Up to six here, which covers almost every design. CSS itself allows many more.
Can I use the result in Tailwind or a CSS file?
Yes. Paste the CSS into any stylesheet, or use it as an arbitrary value in Tailwind. The output is standard CSS.