Skip to content

🌈 CSS Gradient Generator

Visually edit linear, radial and conic gradients. Add or remove color stops freely and copy the CSS code.

✅ 100% free · no signup · nothing sent to any server

🔒 About Privacy

Color Stops

Presets

📖 How to Use

  1. 1
    Choose a type
    Pick linear, radial or conic. The angle and shape inputs change accordingly.
  2. 2
    Edit color stops
    Pick colors and adjust positions. Add or remove stops as needed.
  3. 3
    Copy the CSS
    Copy the generated CSS to clipboard and paste it into your background property.

❓ FAQ

Is my data sent to your server?
No. Everything runs in your browser. You can verify in the Network tab.
What is the browser support?
linear and radial work in all modern browsers. conic-gradient is supported in Chrome 69+, Firefox 83+, Safari 12.1+.
How many color stops can I add?
There is no hard limit. In practice, 2 to 10 stops is common.