CSS gradient generator
Pick colours, drag the stops, and copy the CSS — it updates as you go. Linear, radial or conic, OKLCH blending, a text-contrast check, and Tailwind, SVG or PNG export.
background: linear-gradient(135deg, #ff2d87 0%, #ff457b 8.3%, #ff5671 16.7%, #ff6469 25%, #ff7061 33.3%, #ff7b5b 41.7%, #ff8555 50%, #ff8e4f 58.3%, #ff9749 66.7%, #ff9f43 75%, #ffa83a 83.3%, #ffb02b 91.7%, #ffb800 100%);
background: linear-gradient(in oklch 135deg, #ff2d87 0%, #ffb800 100%);Shortcuts: C copy CSS · R random · arrow keys move the selected stop.
#ff2d87 · rgb(255 45 135) · hsl(334 100% 59%) · oklch(66.1% 0.245 1.9)
Contrast audit worst 1.73:1
Range across the gradient: 1.73 to 3.51:1. Weakest point at 100% (#ffb800). Fails AA somewhere — text over that area will be hard to read.
Nearest text colour that passes 4.5:1 across the whole gradient:
Export
.gradient {
background: linear-gradient(135deg, #ff2d87 0%, #ff457b 8.3%, #ff5671 16.7%, #ff6469 25%, #ff7061 33.3%, #ff7b5b 41.7%, #ff8555 50%, #ff8e4f 58.3%, #ff9749 66.7%, #ff9f43 75%, #ffa83a 83.3%, #ffb02b 91.7%, #ffb800 100%);
background: linear-gradient(in oklch 135deg, #ff2d87 0%, #ffb800 100%);
}The first line is a pre-blended fallback for browsers without “in oklch” support (pre-2023); the second line is the native version.
Describe it, get a gradient
Type a mood, brand or scene. An AI model proposes colours and explains the choice; you edit the result like any other gradient.
Start from a palette
- Press Magenta
- Harbour Dawn
- Terracotta Roof
- Glacier Melt
- Night Tram
- Citrus Peel
- Kelp Forest
- Risograph
- Oat Milk
- Ember
By colour: blue · red · green · black · purple · pink · orange · yellow · teal · gold · rainbow · sunset · silver · white · grey · brown · rose gold · pastel
Your gradients
Nothing saved yet. Press “Save” in the export panel and gradients appear here — stored only in this browser.
Manage or clear saved data on the privacy page.
Why the middle of a gradient turns grey
Browsers have always blended gradient colours in sRGB: they average the red, green and blue numbers. Blue #0047ff and yellow #ffd200 average to roughly #80-something in every channel — a flat grey. That’s the “dead zone” designers fight by adding hand-picked middle stops.
OKLab and OKLCH, designed by Björn Ottosson in 2020 and now part of CSS Color Level 4, are built so equal steps look equally different to the eye. Blending in OKLCH walks around the hue wheel instead of cutting through the grey centre, so the midpoint keeps its colour and brightness. Drag the probe and swap colour pairs to see the difference, and watch the lightness curve: sRGB sags or bulges while OKLab stays close to a straight line.
For learning by adjusting a working model, ahaboo builds visual explainers you steer yourself, such as dragging the Moon to understand its phases.
What goes into a CSS gradient
A gradient is an image, so it goes in background or background-image, not background-color. Every gradient has the same three parts:
- A shape. linear-gradient() travels along a line, radial-gradient() spreads from a point as a circle or ellipse, and conic-gradient() sweeps around a centre like a clock hand.
- Colour stops. Each stop is a colour and an optional position. Two stops at the same position make a hard edge — the trick behind stripes and pie charts.
- An interpolation space. The optional
in oklch/in oklabtells the browser how to mix between stops. Leaving it out means sRGB.
Prefix repeating- to tile the stop pattern. For layered, blurry “mesh” backgrounds, stack several radial gradients — the mesh gradient generator does that for you.
| You want | Use |
|---|---|
| A hero or card background | Linear, 2–3 stops, blended in OKLCH |
| A glow or spotlight | Radial, circle closest-side, fading to transparent |
| Pie chart, progress ring, colour wheel | Conic with hard stops |
| Text filled with colour | Gradient text with background-clip: text |
| A rounded border in colour | Gradient border with two background layers |
| Utility classes | Tailwind gradient classes |
Questions
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line at an angle you choose. A radial gradient spreads outward from a centre point as a circle or ellipse. A conic gradient sweeps around a centre point like the hands of a clock, which is what makes pie charts and colour wheels possible.
Are there keyboard shortcuts?
Yes, on a keyboard: press C to copy the current CSS and R for a random gradient (they are ignored while you type in a field). Select a stop handle and use the arrow keys to move it, Shift + arrow for 10% steps.
How do I make a gradient with 3 or more colours?
Click anywhere on the stop strip to add a stop (up to 12). Each stop has its own colour, position and opacity. In CSS, simply list more stops: linear-gradient(90deg, #12c2e9 0%, #c471ed 50%, #f64f59 100%).
How do I make a transparent gradient in CSS?
Lower a stop’s opacity with the opacity slider; the CSS uses 8-digit hex such as #ff2d8700. Fade to a transparent version of the same colour rather than the keyword transparent, which is black at zero alpha and can leave a greyish edge in older browsers.
Can I edit a gradient I already have?
Yes. Press “Import CSS”, paste any linear-, radial- or conic-gradient() value (hex, rgb(), rgba(), hsl(), named colours, “to right” or degrees), and it loads into the editor with its stops and angle.
What does “easing between stops” do?
CSS blends straight from one stop to the next, which can leave visible edges where a gradient starts and stops changing. Easing (ease-in-out, ease-in, ease-out) curves the transition and is exported as extra intermediate stops, so it works in every browser.
How do I make a CSS gradient?
Pick a type (linear, radial or conic), set at least two colour stops, adjust the angle or centre, then copy the CSS. The result is a background-image value such as linear-gradient(135deg, #ff2d87 0%, #ffb800 100%) that you can put on any element.
What does “blend colours in OKLCH” do?
CSS Color Level 4 lets a gradient choose the colour space it interpolates in, e.g. linear-gradient(in oklch 90deg, blue, yellow). OKLCH and OKLab are perceptual spaces, so the middle of a blue-to-yellow gradient stays bright instead of turning grey. Gradient Studio adds a pre-blended fallback line so older browsers show the same colours.
Which browsers support gradients with “in oklch”?
Chrome and Edge 111+, Safari 16.2+ and Firefox 127+. For anything older the exported CSS starts with a fallback declaration made of many sRGB stops that reproduce the same blend.
Can I share a gradient with someone?
Yes. “Copy share link” puts the whole gradient into the URL after #g=, so the link reopens exactly the same stops, angle and blend space. Nothing is uploaded; the gradient lives in the link itself.
Is text readable on my gradient?
The contrast audit samples 101 points along the gradient and reports the WCAG 2 contrast ratio of your text colour at the weakest point. Body text needs 4.5:1 and large text 3:1 everywhere it might sit. If it fails, the tool suggests the nearest colour that passes across the whole gradient.
Where are my saved gradients stored?
In your browser’s localStorage on this device only. There are no accounts. You can clear everything from the privacy page.