CSS Gradient Generator
Build linear and radial CSS gradients visually. Pick colors, drag stops, copy the CSS.
CSS Gradient Generator — CSS gradients let you paint the background of any element with a smooth blend of two or more colors. They are vector (no image asset needed), they scale perfectly, and they are one of the highest-impact visual effects you can add to a page in a single line of CSS.
Gradient math runs locally. No images are uploaded.
What is css gradient generator?
CSS gradients let you paint the background of any element with a smooth blend of two or more colors. They are vector (no image asset needed), they scale perfectly, and they are one of the highest-impact visual effects you can add to a page in a single line of CSS.
Pick a type (linear or radial), set the angle, add as many color stops as you like, and copy the resulting CSS. The live preview updates as you edit so you can dial in the look before you commit.
How to use it
-
Pick a type
Linear for directional blends, radial for circular glows.
-
Set the angle
For linear: 0deg is bottom-to-top, 90deg is left-to-right.
-
Adjust stops
Change colors and positions. Copy the CSS when ready.
Examples
Sunset horizontal
A classic left-to-right warm gradient.
Result: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%)
Cool radial
A center-out blue glow.
Result: radial-gradient(circle, #00c6ff 0%, #0072ff 100%)