Every gradient generator on the internet does the same thing: two colour pickers, an angle dial, and a line of CSS. They all produce gradients that go slightly grey in the middle, because they all leave the browser interpolating in sRGB, and nobody explains that this is why your blue-to-yellow looks like dishwater halfway across.
This one exposes the colour space, defaults it to oklch, and writes an sRGB fallback line above it so nothing breaks in an older browser. It also does the three gradient types most generators skip: radial for glows, conic for wheels and rings, and mesh for the layered wash that every modern software homepage is running. Twenty-four presets underneath, all click-to-copy.
- Linear, radial, conic and mesh
- OKLCH, OKLab, HSL or plain sRGB
- Up to six colour stops, dragged live
- Gradient text with background-clip
- Tailwind arbitrary-value output
- An sRGB fallback line written for you
- 24 presets, click to copy
- Free, no signup, no attribution
Why does the middle of my gradient look dirty?
This is the single most common gradient problem and it has nothing to do with your colour choices. By default a browser interpolates between two colours in sRGB, and a straight line through sRGB between two saturated colours passes through a washed-out middle. Blue to yellow goes grey. Pink to teal goes grey. You add more stops to hide it, the gradient gets busier, and it still looks slightly wrong. The actual fix is a single keyword: linear-gradient(90deg in oklch, ...). OKLCH is perceptually uniform, so the browser takes a path through colour that matches how your eye reads it, and the dead zone in the middle simply is not there any more.
What is the difference between linear, radial, conic and mesh?
A linear gradient runs along a straight line at whatever angle you set, and it is what you want nine times out of ten: page backgrounds, buttons, section dividers. A radial gradient runs outward from a point, which is how you make a soft glow behind a hero image or a spotlight under a card. A conic gradient sweeps around a point like a colour wheel, and it is the only one of the four that can produce a pie chart, a loading ring or a rainbow border. A mesh gradient is not a CSS feature at all: it is several radial gradients layered over a base colour so the result reads as an organic wash rather than a line. That is the look most modern software marketing sites are running.
How do I make a gradient that does not look dated?
Three habits separate a gradient that reads as current from one that reads as 2014. Keep the two colours close together in hue rather than opposite: analogous pairs look intentional, complementary pairs look like a default. Keep the contrast between them modest, because a gradient is a surface, not a focal point, and the moment it competes with your content it has failed. And use OKLCH so the transition is even. The loud purple-to-orange corner-to-corner gradient is dated because of all three: distant hues, high contrast, and an sRGB path that lurches.
Are gradients bad for performance or accessibility?
Performance, no. A CSS gradient is a handful of bytes that the compositor paints for free, and it is strictly cheaper than the image you would otherwise use. Animating one is a different story: animating background forces a repaint every frame, so animate background-position on an oversized gradient, or animate opacity between two layers instead. Accessibility is where gradients genuinely do cause problems, and it is always the same one: text over a gradient has a different contrast ratio at each end. Check the worst point, not the middle, and hold it above 4.5:1 for body copy.
What does this generator actually give me?
The CSS, in two lines. The first is a plain sRGB gradient that works in any browser made in the last decade. The second is the same gradient with the interpolation colour space applied, which browsers that understand it will use instead. That is a real progressive enhancement rather than a fallback you have to write yourself. There is a Tailwind arbitrary-value version on the second tab, a text-clip mode for gradient headings, and twenty-four presets underneath that you can click to copy. Everything is generated by the same function that draws the preview, so what you copy is exactly what you are looking at.
Which gradient for which job
Four types, and the thing each one is actually good at.
| Type | Use it for | Watch out for | Browser support |
|---|---|---|---|
| Linear | Page and section backgrounds, buttons, dividers | Corner-to-corner at high contrast looks dated | Universal |
| Radial | Soft glows behind a hero, spotlights under a card | Placing the centre off-canvas is what makes it subtle | Universal |
| Conic | Progress rings, pie charts, rainbow borders | Hard stops need the same position twice in a row | All current browsers |
| Mesh | Organic hero washes, modern SaaS backgrounds | Not a real CSS feature: it is layered radial gradients | Universal |
| in oklch | Any two-colour gradient that looks muddy | Emit an sRGB line first as a fallback | Chrome 111+, Safari 16.2+, Firefox 128+ |
Fair questions.
Why do my gradients have a grey band through the middle?
Because the browser is mixing the two colours in sRGB, and the straight line between two saturated colours in that space passes through a desaturated middle. Blue to yellow is the classic offender: the midpoint comes out grey. The fix is one keyword. Adding "in oklch" tells the browser to interpolate in a perceptually uniform space instead, and the muddy band disappears without you adding a single extra colour stop.
What is OKLCH and why does it matter here?
It is a colour space designed so that equal numerical steps look like equal visual steps, which sRGB does not manage. For gradients that means the transition is even the whole way across rather than rushing through some hues and lingering in others. Every current browser supports it in gradients: Chrome and Edge since version 111, Safari since 16.2, Firefox since 128. This generator emits a plain sRGB line first as a fallback, so older browsers still get a gradient.
How many colour stops should I use?
Two is usually right and three is usually one too many. Most gradients that look muddy are not short of stops, they are being interpolated in the wrong colour space, and adding a third colour to paper over it makes the result busier without fixing the cause. Switch to OKLCH first. If it still is not smooth, then add a stop.
What is a mesh gradient?
Several soft radial gradients layered over a base colour, so the result reads as an organic wash rather than a straight line between two points. There is no mesh-gradient property in CSS, so it is built by stacking radial-gradient layers with transparent outer stops. It is what most modern SaaS hero sections are using, and this generator will build one and hand you the CSS.
Can I use these gradients on text?
Yes, and the generator will write it for you. Tick "apply to text" and the output switches to the background-clip technique: the gradient becomes the fill of the letters. Two things to watch. Keep the contrast high enough to stay readable, because a gradient that fades toward the background colour will fail WCAG somewhere along the word. And keep it for headings, never body copy.
Do I need vendor prefixes?
Not any more for the gradient itself. Every browser has supported unprefixed linear, radial and conic gradients for years. The one exception in this tool is the text-clip technique, which still wants -webkit-background-clip alongside the standard property, and the output includes it.
Is a CSS gradient better than an image?
Almost always, yes. A gradient is a few dozen bytes of CSS that renders at any size with no request, no decoding and no blurring on a retina screen. The same thing as a JPEG is tens or hundreds of kilobytes, and it bands unless you export it carefully. The only reason to use an image is if you need noise, texture or something a gradient genuinely cannot describe.
Is the generated CSS free to use?
Completely. No attribution, no licence, no signup. Paste it into a client project and bill for it if you like. It is CSS, not intellectual property worth guarding.
Go and make a gradient.
Four types, a live preview, and CSS on your clipboard in under a minute.
Open the generatorWant more? There is a glassmorphism generator, a favicon generator and hundreds of click-to-copy CSS components in our resources library.