CSS Gradient Generator
Add color stops, pick linear or radial, and copy the finished CSS. The preview updates as you type — nothing here ever leaves your browser.
Build a gradient, get real CSS back
Every stop is a color plus a position — 0% to 100% along the gradient. This tool always renders
the stops in position order when it builds the CSS string
(regardless of the order you added them in), so what you see in
the preview always matches what you copy. Switch Linear to any angle from 0° to 360°, or flip to Radial for a gradient that spreads outward from
the center instead of across a line.
Worked example
Two stops — #667eea at 0% and #764ba2 at 100% — with a linear type
at 135deg produces:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Drop that straight into any CSS file or a style
attribute. Add a third stop at 50% and the CSS —
and the preview — update to a three-color blend automatically.
Frequently asked questions
What's the difference between linear and radial gradients?
A linear gradient transitions along a straight line at a chosen angle — think a sunset fading from orange to purple across the sky. A radial gradient transitions outward from a center point in circles instead, like a spotlight or a glow. Both use the same color stops; only the shape of the transition changes.
How does the angle work for a linear gradient?
In CSS, 0deg points toward the top of the box and the angle increases clockwise from there — so 90deg points right, 180deg points down, and 270deg points left. It trips people up because 0deg isn't 'left to right' like you might expect; it's 'toward the top.' The angle slider here updates the live preview instantly so you don't have to hold that in your head.
Why does the position of each color stop matter?
The position (0–100%) is where along the gradient line or radius that color is fully reached — CSS blends smoothly between whatever stops are on either side. Bunching two stops close together (say 40% and 45%) creates a sharp band of color instead of a smooth fade, which is a legitimate design trick, not a mistake, if that's the look you want.
Do I need vendor prefixes for this CSS to work?
No — linear-gradient() and radial-gradient() have been supported unprefixed in every current browser for years. The CSS this tool generates is copy-paste ready with no -webkit- or -moz- prefixes needed.