Design beautiful linear, radial, and conic gradients visually with live preview — add color stops, control angles, and copy ready-to-use CSS instantly.
Whether you want a subtle background or a bold hero banner, build the exact gradient you need without touching a stylesheet.
Adjust the controls below and watch your gradient update live, then copy the generated CSS.
Writing gradient syntax by hand and guessing color positions is slow — see the result instantly instead.
Watch your gradient update in real time as you adjust colors, angle, and stop positions.
Add as many colors as you like and position each one exactly where you want it.
Switch between linear, radial, and conic gradients depending on the effect you need.
A linear gradient transitions colors in a straight line at a chosen angle — ideal for backgrounds and buttons. A radial gradient radiates colors outward from a center point, useful for spotlight or glow effects. A conic gradient rotates colors around a center point like a color wheel, often used for pie-chart style visuals or unique background textures.
Each color stop in a gradient has a color and a position (0% to 100%), which determines where that color appears along the gradient. This tool lets you add, remove, and reposition stops visually, then generates the exact CSS syntax for you.
Design your gradient in three simple steps.
Pick linear, radial, or conic depending on the visual effect you're after.
Add color stops, set their positions, and adjust the angle until it looks right.
Copy the generated CSS and paste it directly into your stylesheet.
Common questions about generating CSS gradients.