Gradient Generator — Free Online Tool
Create CSS gradient code by adding color stops and adjusting their positions. Supports linear gradients (any angle) and radial gradients (any shape). A live full-width preview updates in real time as you edit. The generated CSS is ready to paste directly into your stylesheet.
100% client-side. No uploads. Your data never leaves your browser.
How to use Gradient Generator
- Choose gradient type: Linear or Radial.
- Add color stops using the '+' button and pick colors using the color input.
- For linear gradients, adjust the angle using the angle slider.
- Copy the CSS output and paste it into your stylesheet.
Frequently Asked Questions
How many color stops can I add?
Between 2 and 5 color stops. Each stop has an independent color and position (0%–100%).
Can I generate a radial gradient?
Yes. Toggle between linear and radial mode. For radial gradients, choose the center shape (circle or ellipse).
Is the output cross-browser compatible?
The generated CSS uses standard linear-gradient() and radial-gradient() syntax, supported in all modern browsers.
Related tools
Related reading
Browse all free tools · theproductguy.in