CSS gradient generator
Build a linear, radial or conic gradient with as many colour stops as you want. Copy the CSS or the Tailwind class, or save the same gradient as a PNG up to 4K.
- Drop your colours on the barTwo to start with, or twenty. Drag them where you want them.
- Pick the shape and the blendLinear, radial or conic, interpolated in the space you choose.
- Copy the CSS, or save a PNGA few hundred bytes of code, or a 4K image drawn in this tab.
Preview
Drag a stop to move it. Click the bar to add one, and press Backspace to remove the selected stop.
CSS
background-image: linear-gradient(135deg, #3b2f78 0%, #b8496b 55%, #f6a45c 100%);Start from one of these
Three stops, blended in sRGB. Everything here happens in this tab.
Nothing is uploaded and nothing is saved. The PNG is drawn by your own browser, so the file never exists anywhere but on your machine.
How to make a CSS gradient
Pick your colours
Click a stop on the bar to select it, then set its colour, its position and its opacity. Click the bar itself to add a stop, and Backspace removes the selected one.
Choose the shape
Linear runs along an angle, radial spreads from a point, conic sweeps around one. Blend controls the colour space the browser interpolates in, which is what fixes a muddy middle.
Take the CSS, or the image
Copy gives you the background-image declaration, or the Tailwind class. Save PNG draws the same gradient at up to 4K on your own machine.
The three gradient functions, and when each one is right
CSS has three. They take the same list of colour stops and differ only in the shape the list is laid along.
| Function | Shape | Use it for |
|---|---|---|
| linear-gradient | A straight line at an angle. | Backgrounds, buttons, the fade over a hero image. |
| radial-gradient | Rings out from a point. | Spotlights, soft vignettes, a glow behind a card. |
| conic-gradient | A sweep around a point. | Pie charts, colour wheels, progress rings. |
In a linear gradient 0deg points up and the angle turns clockwise, so 90deg runs left to right and 180deg runs top to bottom. That is the opposite of the convention in most drawing software, and it is the single most common reason a gradient copied out of Figma comes out upside down.
Why a two-colour gradient goes grey in the middle
Blend blue into yellow in sRGB and the middle is a dead grey. Nothing is broken. sRGB stores light the way a monitor emits it, not the way an eye reads it, so the straight line between two colours in that space passes near the point where they cancel out.
Set Blend to OKLCH and the same two colours pass through green instead, because OKLCH is built so that equal steps look like equal steps. Compare the two on the same pair of colours and the difference is not subtle. This is the one setting on this page worth knowing about, and the guide below explains what it costs.
The other fix works everywhere: add a third stop in the middle and choose the colour yourself. Click the bar to drop one in.
Gradient text and gradient borders
Neither is a gradient feature. Both are the same gradient pointed at something other than a background. For text, three declarations that only work together:
background-image: linear-gradient(135deg, #3b2f78 0%, #f6a45c 100%);
background-clip: text;
color: transparent;For a border, put the gradient in border-image, or paint two stacked backgrounds and let the padding box cover the middle of the outer one. The guide has both, with the trade-off between them: border-image cannot do rounded corners, and the two-background version can.
Copy the CSS, or export the image
Take the CSS for anything on the web. A gradient is a few hundred bytes of text, it stays sharp on every display, and it costs no request. Tailwind users can switch the output to an arbitrary-value class and paste that instead.
Save PNG is for the places CSS cannot reach: a phone wallpaper, a slide deck background, a social header, an email. It is drawn by your own browser at up to 3840 by 2160, and it matches the preview even when you have picked a blend space canvas has never heard of. There is no upload and no watermark on it.
Keyboard, and the things it will not do
Tab to a stop and the arrow keys move it one percent at a time, or ten with Shift held. Backspace removes it. Full screen hands the whole viewport to the preview, which is how you find out that a gradient that looked fine in a card has a visible band across it.
It does not do mesh gradients, and it does not animate. Both are worth saying plainly. CSS has no mesh gradient function, so every tool offering one is stacking radial gradients or handing you a PNG, and you can do the first of those here one layer at a time. Animation belongs in your own stylesheet, because what should move is a decision about the page rather than about the gradient.
Frequently asked questions
Does the PNG match what I see in the preview?
Yes, and it takes work to make that true. The preview is a real background-image, so the browser draws it. Canvas has no idea what a colour space is and blends in sRGB whatever you asked for, so exporting an OKLCH gradient by handing canvas two colours would give you a different picture. Instead the ramp is sampled: each pair of stops is interpolated in the space you chose and written out as 24 canvas stops. The error is under one 8-bit step, which is smaller than the difference between two adjacent shades in the file.
Which browsers understand "in oklch"?
Chrome and Edge from 111, Safari from 16.2, Firefox from 128. That is every browser released since mid-2024. Older ones ignore the whole declaration rather than falling back to sRGB, so if you have to support them, put a plain sRGB gradient on the line above and let the newer one override it. Leave Blend on sRGB and no in clause is written at all, because sRGB is the CSS default and adding syntax that changes nothing is not a favour to whoever reads the code next.
Can it make a mesh gradient?
No, and it will not pretend to. A mesh gradient is a grid of control points blended in two dimensions, and CSS has no function for it. Every "CSS mesh gradient" is really three or four large radial gradients stacked with background-image, which is a technique rather than a feature, or an SVG filter, or a PNG. You can build the layers here one at a time and stack them yourself: make a radial gradient that fades to transparent, copy it, and repeat.
How do I put the gradient on text instead of a background?
Three declarations, and they have to be together. Put the gradient on background-image, add background-clip: text, then color: transparent so the text stops painting over the gradient behind it. Copy the CSS from here and add the other two lines. Do not use it on body copy: the text becomes an image to a browser’s contrast maths, and no automated check will tell you it has become unreadable.
Can I make a gradient that fades to transparent?
Yes. Select a stop and drag Opacity down to zero. The important part is that the stop keeps its colour: a fade to the keyword transparent is a fade to transparent black, and in older browsers that turned the middle of a white gradient grey. Setting the opacity here instead writes rgb(17 24 39 / 0%), which keeps the hue and fades only the alpha. The chequerboard behind the preview is what lets you see the difference.
What size should I export for a hero section or a wallpaper?
1920 by 1080 covers most desktop hero sections, 2560 by 1440 covers a large monitor, and 3840 by 2160 is 4K. 1080 by 1920 is the phone wallpaper and story shape. A gradient PNG compresses extremely well because it has almost no detail, so a 4K one is usually under 200 KB. If the gradient is going on a website, though, use the CSS: it is a few hundred bytes and it stays sharp at every size.
Are my colours saved or sent anywhere?
Neither. There is no server to send them to and no storage to save them in, so a reload gives you the first preset back. That also means a gradient you liked has to be copied before you leave. Take the CSS, or press Save PNG.