Color Picker Lab

CSS Gradient Generator

Build linear, radial, and conic gradients with as many color stops as you want. Switch on OKLCH interpolation for blends without the muddy gray middle, then copy the CSS.

Type
Interpolation
Color stops
  • 0%
  • 100%
background: linear-gradient(90deg, #FF5733 0%, #3B82F6 100%);

Why OKLCH gradients look better

Blending two colors through the sRGB color space can pass through a dull gray midpoint. Interpolating in OKLCH keeps the blend bright and even — the same trick modern design systems use. Add the in oklch keyword to any CSS gradient (e.g., linear-gradient(in oklch, #FF5733, #3B82F6)).

Frequently asked questions

How do I make a CSS gradient?
Choose a type (linear, radial, or conic), add color stops with their positions, then copy the generated background declaration into your CSS.
What is an OKLCH gradient?
A gradient that interpolates in the OKLCH color space using the in oklch keyword, so the blend stays bright and even instead of passing through a muddy gray midpoint.
Can I use more than two colors?
Yes — add as many color stops as you need, each with its own position.