OKLCH gradient generator
OKLCH travels around the hue wheel, so gradients stay vivid from end to end. Pick the hue path and copy the CSS.
linear gradient
Click the bar to add a stop
3 stops · eased
Code
background-image: linear-gradient(160deg, #2a2f6b 0%, #30316c 6.5%, #40376e 13%, #583f71 19.5%, #754675 26%, #924d77 32.5%, #ab5279 39%, #bc547a 45.5%, #c2557a 52%, #c4597a 58%, #ca6379 64%, #d37378 70%, #dd8575 76%, #e79671 82%, #efa56c 88%, #f5af68 94%, #f7b267 100%);
Easing is applied by baking 8 stops per segment, so this snippet needs no modern colour support at all.
Shape
Angle160°
Selected stop
1 of 3
Position0%
Opacity100%
Blending
Interpolation
Hue path
Easing
Easing is why a fade to transparent stops looking like it ends early. Extra stops are computed along the curve.
Smoothness8 per segment
Grainoff
A little noise breaks up the banding a wide gradient shows on an 8-bit display.
Travels around the hue wheel. Vivid, and never passes through grey.
Presets
Questions
- OKLab or OKLCH?
- OKLab mixes in a straight line and gives calm, even blends. OKLCH travels around the hue wheel and keeps saturation up, which suits vivid, colorful gradients.
- What does the hue path do?
- It chooses which way around the color wheel the gradient goes. Longer passes through every hue in between, which is how two colors make a rainbow.
Next steps
The tools that usually come after this one.
Pairs with
The catalog behind this tool: real, published entries with verified pricing and licensing, not a list of affiliate links.