CSS Gradient Generator
Design a linear or radial CSS gradient visually and copy the generated code, entirely in your browser.
How to Create a CSS Gradient for Free
1. Choose Linear or Radial, and set the angle for linear gradients.
2. Pick two colors and adjust where each one starts using the stop sliders.
3. Watch the live preview update instantly as you adjust any setting.
4. Click Copy CSS to grab the ready-to-use background declaration.
Generation in Your Browser
The gradient CSS is generated entirely in your browser from the colors and settings you choose. Nothing is ever sent to a server.