Skip to content
Gridtray

CSS Gradient Generator

Drag color stops along the bar, set the angle or center, and switch between smooth OKLCH and classic sRGB blending. The CSS you copy is exactly what the preview shows.

Type

°
Blending

Blends through perceptual lightness, so the middle stays bright instead of turning grey.

Color stops

Click the bar to add a stop, drag to move it.

%

Presets

3 stops · linear · OKLCH
/* sRGB fallback, pre-blended in OKLCH */
background: linear-gradient(160deg, #0f2a44 0%, #143651 9.2%, #18435d 18.3%, #1d5069 27.5%, #225e75 36.7%, #286c81 45.8%, #2f7a8c 55%, #4c8d97 62.5%, #689fa3 70%, #84b1b0 77.5%, #a0c3bf 85%, #bcd5d0 92.5%, #d8e7e2 100%);
/* Browsers with CSS Color 4 blend natively */
background: linear-gradient(160deg in oklch, #0f2a44 0%, #2f7a8c 55%, #d8e7e2 100%);

How to use the css gradient generator

  1. Pick linear, radial or conic.
  2. Click the stop bar to add a color, drag a stop to move it, and set its color below. Arrow keys nudge a focused stop; Delete removes it.
  3. Set the angle for linear and conic gradients, or the center and shape for radial ones.
  4. Choose the blending. OKLCH keeps the middle of the gradient bright; sRGB is the classic browser look.
  5. Copy the CSS or a Tailwind class, or download a 1920 × 1080 PNG for a wallpaper or slide.

Why gradients turn grey in the middle

A CSS gradient by default blends colors in sRGB, channel by channel. Between two saturated opposites, such as blue and yellow, the halfway point averages out to a flat grey. The fix used to be adding extra stops by hand.

CSS Color Level 4 lets the browser blend in other color spaces: linear-gradient(in oklch, …). OKLCH moves through lightness, chroma and hue the way people see them, so the middle keeps its color. Current Chrome, Edge, Safari and Firefox support it. For older browsers, this tool adds a first line with the same gradient pre-blended into extra sRGB stops, so everyone sees the smooth version.

Linear, radial and conic

  • Linear runs along an angle. 0° goes up, 90° goes right, 180° goes down.
  • Radial spreads from a center as a circle or an ellipse that fits the box.
  • Conic sweeps around a center like a clock hand. Useful for color wheels, pie charts and sheen effects.

Using gradients well

Keep text off the busiest part of a gradient, or check it against both ends with the contrast checker. Stops that are close in lightness make calm backgrounds; stops far apart in lightness draw the eye. Start from a palette you built in the palette generator with “Open as gradient”, or take colors from your shelf.

Questions

What does 'in oklch' do in a CSS gradient?

It tells the browser to blend the colors in the OKLCH color space instead of sRGB, which avoids grey or muddy midpoints between saturated colors.

Will the OKLCH gradient work in older browsers?

Yes. The CSS output starts with a fallback line that has the OKLCH blend pre-computed as sRGB stops. Browsers that understand 'in oklch' use the second line.

How many color stops can I add?

Up to eight. Two or three stops cover most backgrounds; more is useful for sunsets, maps and data scales.