CSS Gradient Generator

Design linear, radial and conic CSS gradients with up to eight colour stops and OKLCH blending, see them live, and copy the CSS with a fallback colour.

Preview

CSS
background-color: #ff7a18;
background-image: linear-gradient(135deg, #ff7a18 0%, #af002d 60%, #319197 100%);

Gradient

°
Colour stops
0%
60%
100%
How is this calculated?
linear-gradient([in oklch] <angle>, <colour> <position>, …); radial-gradient(<circle|ellipse> at <x> <y>, …); conic-gradient(from <angle> at <x> <y>, …). Angles: 0deg points up, 90deg to the right.

Runs in your browser — nothing you enter leaves this device.

About this tool

What it does

CSS Gradient Generator builds the three kinds of CSS gradient and shows each change live. A linear gradient blends along a straight line at any angle; a radial gradient spreads out from a centre point as a circle or an ellipse; a conic gradient sweeps around a centre like the hands of a clock, which is how pie charts and colour wheels are drawn in pure CSS. Add up to eight colour stops, type any CSS colour or pick one, and drag each stop’s position. Presets give a starting point. An option blends the colours in OKLCH, the perceptual colour space of CSS Color 4, so a blue-to-yellow gradient passes through bright colours instead of a muddy grey middle. The CSS to copy includes a solid background colour first, which older browsers and printing fall back to.

How to use it
  1. Pick a preset or choose Linear, Radial or Conic.
  2. Set the angle, or the shape and centre.
  3. Edit the colour stops: pick or type a colour, drag its position, add or remove stops.
  4. Copy the CSS and paste it into your stylesheet.
Limits and your data
  • “in oklch” is supported by browsers released from 2023; older ones ignore the whole gradient line and show the solid fallback colour, so the fallback matters.
  • Repeating gradients (repeating-linear-gradient) and hard colour stripes made from two stops at one position can be typed by hand in the stop list but have no special controls.
  • Large, smooth gradients can show visible banding on 8-bit screens; a little noise texture or more stops helps.
  • Text over a gradient must keep enough contrast across the whole gradient, not just at one end — check the lightest and darkest parts.
  • Everything runs in your browser. Nothing you design is sent or saved.

Questions

How do I make a gradient go diagonally?

Use a linear gradient at 45° or 135°. 135deg runs from the top-left corner to the bottom-right.

Why does my gradient look grey in the middle?

Blending in sRGB passes through duller colours between opposite hues. Turn on “Blend in OKLCH” to keep the middle bright.

How do I make a pie chart with CSS?

Use a conic gradient with hard stops: for example #2563eb 0% 40%, #f59e0b 40% 100% — two stops at the same position make a sharp edge.

Do I still need vendor prefixes for gradients?

No. Every current browser supports unprefixed linear, radial and conic gradients; only the “in oklch” option needs a 2023-or-later browser.