CSS Gradient Generator — Linear, Radial, Conic
Build beautiful CSS gradients with multiple color stops, angle control, and live preview. Copy ready-to-use background CSS for your projects — no upload.
Your data never leaves your browser
%
%
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
About this tool
12 presetsRandom gradientLinear radial conicCopy CSSPrivate
How to use
- Choose gradient type and angle.
- Adjust color stops and positions.
- Copy the CSS background rule.
Examples
Linear gradient
2 stops
linear-gradient(90deg, ...)