CSS Gradient Generator
Build a CSS linear or radial gradient with a live preview.
Worth Knowing
CSS gradients are generated by the browser rather than loaded as images, which means they scale to any size without blurring and add nothing to page weight — a genuine performance win over the background images they replace. Linear gradients blend along a straight axis while radial ones spread from a center point. The live preview matters because gradient syntax, especially the angle and color-stop percentages, is hard to picture from the code alone, and small tweaks change the result substantially.
How to Use
- Paste or type your color 1 into the CSS Gradient Generator above.
- Set any additional options: Color 2, Type, Angle (linear only).
- The output updates instantly and is ready to copy.