Build linear and radial CSS gradients with 2 or 3 color stops, adjust the angle, preview live and copy the generated CSS. Free, runs in your browser.
How the gradient generator works
A CSS gradient is a rendered image the browser draws from a short declaration. Linear gradients blend colors along a straight line set by the angle — 0deg points up, 90deg points right, and so on clockwise. Radial gradients blend outward from the center in a circle, so the angle doesn't apply. Your color stops are placed at evenly spaced percentages: two stops sit at 0% and 100%, three at 0%, 50% and 100%. The browser interpolates between adjacent stops, and the generated declaration is plain standards-based CSS that works in every modern browser with no prefixes.
background: linear-gradient(90deg, #d946ef 0%, #6366f1 100%);Frequently asked questions
Is anything uploaded when I build a gradient?
No. The CSS is generated locally in your browser as you adjust colors, type and angle. Only the compact gradient settings appear in the URL so you can share an exact gradient with a link.
What do the angle values mean?
The angle sets the direction the gradient travels. 0deg goes bottom-to-top, 90deg left-to-right, 180deg top-to-bottom and 270deg right-to-left — clockwise from pointing up. Diagonals like 45deg or 135deg are popular for hero backgrounds because they add depth without distracting from content.
When should I use a radial gradient instead of linear?
Radial gradients radiate from a center point, which suits spotlight effects, soft glows behind hero elements and subtle vignettes. Linear gradients suit banners, buttons and section backgrounds where you want a clear directional sweep. Radial gradients ignore the angle — their shape is controlled by position and size instead.
Last updated: 8 July 2026
More tools
Runs entirely in your browser — nothing you enter is uploaded. ColorMint · MintKit