CSS Gradient Generator
Build CSS linear and radial gradients with a live preview.
About CSS Gradient Generator
CSS Gradient Generator builds linear and radial gradients visually, with a live preview and ready-to-paste CSS. Add as many color stops as you need; each stop has its own color picker and a position slider from 0% to 100%. The output is the linear-gradient() or radial-gradient() string browsers consume.
Worked example: a linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%) — a blue-to-violet-to-pink diagonal — is built by adding three stops, picking their colors, sliding their positions to 0 / 50 / 100, and setting the angle to 135. The generator hands you the exact CSS string ready to paste into a background-image property. Switch to radial and the same three stops become a centered gradient that fades from the middle out.
A few practical notes. Gradients with adjacent stops at close or identical positions create hard color edges — useful for stripe and patterned effects, not just smooth transitions. Banding (visible color steps in a smooth gradient) is an 8-bit color depth artefact, more obvious in dark gradients; mitigations include adding intermediate stops or applying a subtle dither overlay. For older browsers, declare a solid background-color first as a fallback before background-image — that way users without gradient support see a sensible solid color.
Everything happens in your browser. Nothing about your design work is uploaded or stored.