How to use it
- Start from a preset, or from the two default colors.
- Choose the type (linear, radial, conic) and set the angle or center.
- Add color stops and slide them into place; you can set opacity too.
- Copy the CSS or the Tailwind class.
Why oklch interpolation?
A classic linear-gradient mixes colors in sRGB. Between two vivid opposite colors (say, blue and yellow) the middle turns gray and muddy.
With in oklch, the browser mixes in a color space built around human vision, so the blend stays vivid and even. The generator turns this on by default and adds a plain sRGB line first for older browsers:
background: linear-gradient(135deg, #ff7a59 0%, #7c3aed 100%);
background: linear-gradient(135deg in oklch, #ff7a59 0%, #7c3aed 100%);
Chrome 111+, Safari 16.2+ and Firefox 127+ use the second line; older browsers use the first.
The three types
- Linear: runs in one direction; set the angle in degrees (0° up, 90° right).
- Radial: spreads from a point as a circle or ellipse. Good for glows and highlights.
- Conic: sweeps around a center point. Use it for color wheels, pie charts and progress rings.
The repeating option makes stripes and patterns without an image.
Tailwind output and validation
The Tailwind output is an arbitrary-value class (bg-[linear-gradient(...)]) with spaces turned into underscores, as Tailwind expects. The CSS is checked with your browser's own CSS.supports(), so you'll see right away if it would be rejected.
Share your settings with a link: they go after the #, so our server never sees them.
Frequently asked questions
How do I make a CSS gradient?
Use linear-gradient(), radial-gradient() or conic-gradient() in the background property. This generator writes it for you.
Why is the middle of my gradient gray?
sRGB mixing turns gray between vivid opposite colors. Switch on oklch interpolation.
Does it work in every browser?
Plain gradients do. oklch interpolation is newer, so we add a fallback line.
Can I use transparent colors?
Yes, every color stop has its own opacity.