CSS Gradient Generator
Design a gradient visually and copy the CSS. Pick two or three colours, set their positions and the angle, watch the preview update live, and take the exact code your stylesheet needs.
Build your gradient
Start from a preset or mix your own colours.
Design first, code second
A live preview with the exact CSS always underneath it.
Linear and radial
Straight blends at any angle from 0 to 360 degrees, plus circle radial gradients for glows and spotlights.
Three colour stops
Two stops for classic blends, three for richer transitions — each with its own position along the gradient.
Clean, standard CSS
The output is a single standard background declaration that works in every modern browser, with no prefixes or leftovers.
About the css gradient generator
Gradients are the quiet workhorse of modern web design — hero sections, buttons, cards and charts all lean on them — but writing gradient CSS by hand means picturing colour stops and angles in your head. This generator flips the work around: design first, code second. The preview updates with every change, and the CSS underneath is generated from the same numbers, ready to paste.
Two colour stops cover most designs: a start colour at 0% and an end colour at 100%. Adding the optional third stop puts a middle colour wherever you place it, which softens harsh blends and creates the sunset and ocean effects in the presets. Positions are percentages along the gradient line, and the generator sorts them automatically, so entering 100 before 0 never produces broken code.
The angle slider follows the CSS convention: 0 degrees points upward, 90 degrees runs left to right, and 180 degrees runs top to bottom. Radial gradients spread from the centre in a circle. Every value you set appears verbatim in the copied CSS — what you preview is precisely what your stylesheet will render.
Frequently asked questions
Stops, angles and output format, answered plainly.
What CSS does the generator produce?
A single standard background declaration, for example background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);. It works in all modern browsers with no vendor prefixes.
What do the colour stop positions mean?
Where along the gradient each colour sits, as a percentage. 0% is the start, 100% is the end. A middle stop at 50% puts its colour exactly halfway through the blend.
How do gradient angles work in CSS?
For linear gradients, 0deg points up, 90deg points right, 180deg points down and 270deg points left. The slider covers the full circle so diagonal blends are easy to find.
Can I make a radial gradient?
Yes — switch the type to Radial and the colours blend outward from the centre in a circle. The angle slider does not apply to radial gradients.
Why does my third colour not show?
The third stop has its own “Use colour 3” switch. Until it is ticked, the colour is ignored so you can keep it ready without affecting the design.
Can I use the gradient in a design tool or presentation?
The output is CSS for websites and apps. For other tools, note the hex codes and positions shown here and recreate the same stops — the values transfer directly.