Color & CSS
CSS Gradient Generator
background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); background: linear-gradient(135deg in oklch, #06b6d4 0%, #3b82f6 100%);
Design a gradient by eye and copy the CSS. Choose linear, radial, or conic, add color stops, and preview the result as you go.
How to use this tool
Start with a preset (Ocean, Sunset, Forest, Spotlight, Color wheel or Midnight), press Random gradient, or choose Linear, Radial or Conic.
Set the Angle, then change each color stop's color and position. Add a color stop or Remove stop for more or fewer, and turn on Smoother blend (OKLCH) for more even mixing: an older-browser fallback is written with it.
Watch the preview, and when it looks right press Copy CSS.
How to use this tool
Start with a preset (Ocean, Sunset, Forest, Spotlight, Color wheel or Midnight), press Random gradient, or choose Linear, Radial or Conic.
Set the Angle, then change each color stop's color and position. Add a color stop or Remove stop for more or fewer, and turn on Smoother blend (OKLCH) for more even mixing: an older-browser fallback is written with it.
Watch the preview, and when it looks right press Copy CSS.
Was this tool helpful?
Suggest an improvementHelp keep ConduitTools free
Every tool here is free, private and built by a solo developer. If this one saved you time, a small tip keeps the site running and new tools coming.
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.
- Three gradient types
- Linear with any angle, radial as a circle or ellipse from any corner or edge, and conic for color wheels and pie charts.
- Smoother blends
- 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.
- Start fast
- 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.