CSS
CSS Gradient Generator — Linear & Radial
Build linear, radial and conic gradients visually and copy the CSS.
Runs entirely in your browser — nothing you paste is uploaded or stored.
What is css gradient generator?
CSS gradients let you paint a smooth transition between colours directly as a background, with no image file needed — but writing the syntax by hand means guessing at angles and stop positions and reloading the page to see the result. This tool builds linear, radial and conic gradients visually: drag stops, pick colours, adjust the angle or origin, and watch the preview update in real time, then copy the exact CSS declaration it produces.
When to use it
- Building a background gradient for a hero section or button and seeing the exact result before committing it to code.
- Recreating a gradient you've seen elsewhere by matching its colours and angle visually rather than guessing values.
- Exploring radial and conic gradients, which are harder to reason about from syntax alone than linear ones.
- Handing a designer-approved gradient off to a developer as a ready-to-paste CSS declaration.
How to use this tool
- Start from a preset — Ocean, Sunset, Candy, Purple haze, Mint, Mono or Aurora — or build a gradient from scratch.
- Choose a gradient type — linear, radial or conic.
- Adjust the angle (linear and conic) or the shape and origin position (radial and conic).
- Set each colour stop's colour and position, and add or remove stops as needed; each stop's position slider is tinted to match its own colour, so it's obvious which slider moves which stop.
- Copy the generated `background` declaration, or copy a link that restores this exact gradient to share with someone else.
Example
A two-stop linear gradient at 90 degrees.
Input
linear, 90deg, #3cbcd4 at 0%, #6b21a8 at 100%Output
background: linear-gradient(90deg, #3cbcd4 0%, #6b21a8 100%);Paste this declaration directly into any CSS rule, or into an inline `style` attribute.
Browser support
Linear and radial gradients work in every browser in current use. Conic gradients are supported in all major browsers released since 2020 — if you need to support something older, provide a solid-colour or linear-gradient fallback declared before the conic one, so unsupported browsers simply use the earlier, understood declaration.
Getting an exact colour into a gradient stop
A gradient stop only looks right if the colour behind it is exact, not eyeballed. Look up or convert a brand colour’s precise HEX, RGB or OKLCH value with the Color Converter first, then paste it into a stop here.
Frequently asked questions
What's the difference between linear, radial and conic gradients?
A linear gradient transitions along a straight line at a given angle. A radial gradient radiates outward from a point, either as a circle or an ellipse. A conic gradient sweeps around a point like a colour wheel, which is what makes it useful for pie-chart-style effects and some kinds of loading spinners that plain linear or radial gradients can't produce.
Can I use more than two colour stops?
Yes — add as many as you like with the "Add stop" button, each with its own colour and position from 0% to 100%. Stops don't need to be evenly spaced; clustering several stops close together creates a sharper transition at that point in the gradient.
Why do my stops show as hex colours even though I typed rgb() or a name?
The tool normalises every colour to hex in the generated CSS for consistency and brevity — `rgb(60 188 212)` and `#3cbcd4` are the exact same colour, hex is just shorter to read and paste. If you need alpha transparency in a stop, use an 8-digit hex or `rgba()` as input; it's preserved correctly, just re-expressed.
Does the position field for radial and conic gradients accept any value?
It accepts the standard CSS position keywords — `center`, `top`, `bottom`, `left`, `right`, and their combinations like `top left`. These cover the vast majority of real designs; for a precise pixel or percentage origin not covered by a keyword, edit the copied CSS directly.
Is a CSS gradient better than a gradient image?
Almost always, for a solid-colour transition. A CSS gradient is a few dozen bytes of text versus a PNG or JPEG that's typically tens of kilobytes, it stays perfectly sharp at any screen size or zoom level, and it can be edited or animated without touching an image editor.
Find these tools useful? A coffee helps keep them free and ad-light.
Buy me a coffee