Free CSS Gradient Generator
Build a linear or radial gradient, adjust colors and stops, and copy the ready-to-use CSS.
Color stops
CSS
Why 90deg points right, not up
CSS gradient angles trip a lot of people up because they don't follow the "0 is horizontal" convention many expect from geometry class. In CSS, 0deg means "to top" — the gradient flows straight upward — and the angle increases clockwise from there, so 90deg points right, 180deg points straight down, and 270deg points left. That's why this tool's default of 90deg produces a left-to-right gradient rather than a bottom-to-top one; it's worth double-checking the angle whenever a gradient direction looks unexpectedly rotated from what you pictured.
Gradients don't animate the way colors do
A plain CSS transition can smoothly interpolate a single background color, but it generally cannot smoothly interpolate between two different gradients — background-image isn't a value browsers know how to blend by default. The common workarounds are animating background-position on a gradient that's larger than its container (so it appears to shift), or using the newer @property CSS feature in browsers that support it, which lets you register a custom property with an interpolatable type.
Frequently Asked Questions
Linear vs. radial gradient — what's the difference?
A linear gradient transitions colors along a straight line at whatever angle you set. A radial gradient transitions colors outward from a center point in a circle. Linear suits backgrounds and buttons; radial suits spotlight or glow effects.
What do the color stop percentages mean?
Each stop's percentage is where that color reaches full strength along the gradient. Two stops at 0% and 100% blend smoothly across the whole element; bunching stops closer together makes the transition between them sharper.
Do I need vendor prefixes for gradients?
No. linear-gradient() and radial-gradient() have been supported unprefixed in every modern browser for years, so the CSS this tool generates works as-is.
Can I use more than two colors?
Yes — add as many color stops as you like with the "Add color" button, each with its own position, and remove any stop with its × button (a gradient needs at least two).
Why does an angle of 90deg point right instead of horizontal from the left?
CSS defines 0deg as "to top" and measures angle clockwise from there, so 90deg is "to right," 180deg is "to bottom," and 270deg is "to left" — a different convention than the 0-degrees-is-horizontal you might expect from geometry.
Can I animate a gradient with a CSS transition?
Not smoothly in most cases — browsers don't natively interpolate between two different background-image gradients the way they interpolate a single color. Common workarounds include animating background-position on an oversized gradient, or using the newer @property feature in browsers that support it.