CSS Gradient Generator
Design linear, radial and conic CSS gradients with draggable color stops, angles, repeating mode and OKLCH interpolation. Live preview, copy the code.
Presets
Gradient settings
Color stops
Click the bar to add a stop, drag handles to move them. Colors accept hex, rgb(), hsl() or oklch().
Preview
background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
Related Tools
View AllWhat is CSS Gradient Generator?
A full CSS gradient editor supporting linear-gradient, radial-gradient and conic-gradient, their repeating variants and modern colour interpolation (in oklab / in oklch). Colour stops can be dragged on a bar or typed exactly, and colours accept hex, rgb(), hsl() or oklch().
How to use CSS Gradient Generator
- Choose a preset or a Type: Linear, Radial or Conic.
- Set the Angle (linear), Start angle (conic) or Shape, Size and center position (radial/conic).
- Edit Color stops: click the bar to add a stop, drag handles to move them, or type a color and position for each stop.
- Optionally tick Repeating gradient and pick an Interpolation color space (OKLab or OKLCH).
- Copy the CSS code.
Example
Linear, angle 45°, stops #00c9ff at 0% and oklch(70% 0.2 150) at 80%, interpolation OKLCH
background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%); background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
When to use CSS Gradient Generator
Use it for backgrounds, buttons, hero sections and stripes or colour wheels made from gradients. For soft multi-point "mesh" backgrounds use the Mesh Gradient Generator; for photo-like effects on images use CSS filters instead.
How CSS Gradient Generator works
Stops are sorted by position and written as color position%. Linear gradients use an angle in degrees, radial gradients shape [size] at x% y%, conic gradients from angle at x% y%. Clicking the bar inserts a stop whose colour is interpolated from its neighbours. When an interpolation space is selected the tool outputs two declarations: a plain sRGB fallback first, then the same gradient with in oklch (or in oklab), so older browsers keep a working gradient and modern browsers use the smoother perceptual blend.
Common Use Cases
- Hero and section backgrounds
- Gradient buttons and badges
- Colour wheels and pie-like visuals with conic gradients
- Striped backgrounds with repeating gradients
- Smooth OKLCH gradients that avoid the grey middle of sRGB blends
FAQs
Why are there two background lines with OKLCH interpolation?
Browsers that do not understand in oklch drop that declaration entirely. The first line is a normal sRGB gradient they can use; supporting browsers apply the second line.
What does OKLCH interpolation change?
Colours are blended in a perceptually uniform space, so gradients between saturated colours stay vivid instead of passing through a dull grey or muddy middle.
Can I use transparency?
Yes. Use rgba(), hsl() or oklch() with an alpha value (for example rgba(0, 0, 0, 0.5)) as a stop colour.
How do I make hard stripes?
Put two stops at the same position (e.g. yellow 5% and black 5%) and enable Repeating gradient, as in the Stripes preset.