Build CSS gradients visually — linear, radial and conic. Drag color stops, adjust the angle, copy the CSS in one click. Everything runs in your browser with no upload and no account.
No saved gradients yet.
Why use this generator?
All gradient types
Linear, radial and conic gradients with unlimited color stops and full CSS3 options.
Instant preview
Live preview and draggable gradient bar — see every change in real time.
Save & export
Save gradients locally, export as PNG and copy CSS with one click.
Free, no account
No signup, no file upload, no ads. Everything stays in your browser.
Frequently asked questions
What is the difference between linear, radial and conic gradients?
A linear-gradient transitions colors along a straight line at a given angle. A radial-gradient expands from a center point in an ellipse or circle. A conic-gradient sweeps colors around a center point like a pie chart.
How do I add transparency to a CSS gradient?
Use rgba() or hsla() color values in your stops. Edit the hex field to include an alpha channel, for example #667eea80 for 50% opacity. The checkered background in the preview shows transparency.
Do I need the -webkit- prefix?
All modern browsers support unprefixed CSS gradients. Enable the -webkit- prefix only if your project needs to support very old iOS Safari (pre-7) or old Android WebView.
How do I use a CSS gradient as a background?
Paste the generated CSS into your stylesheet. Use background: linear-gradient(...); on any element. Set min-height: 100vh on the body to cover the full viewport.
Can I apply a gradient to text?
Yes: set background: <gradient>, then -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; on the text element.