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 stops fan out from a point instead of along a line, with two extra controls: shape — circle or ellipse — and the origin, which can sit at the center or any of the eight edges and corners. Setting ellipse and bottom left, for instance, produces radial-gradient(ellipse at bottom left, #5b9dff 0%, #8b5cf6 100%).
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.