CSS Gradient Generator
Design linear, radial, and conic gradients visually. Add color stops, adjust the angle, and copy clean CSS.
- 0%
- 100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);Frequently Asked Questions
How do I add more color stops?
Click the "Add Stop" button below the stop list. A new stop will appear in the middle of your current range. You can then drag its position slider and pick any color.
What is a conic gradient?
A conic gradient sweeps colors around a center point (like a color wheel), rather than radiating outward. It is great for pie charts, donut visuals, and stylish borders.
Why does my gradient look gray in the middle?
This often happens when two complementary colors (e.g. red and green) are blended through RGB space. Try switching to a 3-stop gradient and adding an intermediate color, or use hues that are closer together on the color wheel.
Can I use these gradients anywhere?
Yes. The generated CSS works in any modern browser for backgrounds, borders (via background-clip), text fills, and more. All major browsers have supported linear-gradient, radial-gradient, and conic-gradient for several years.
Is my gradient data sent to a server?
No. The entire tool runs client-side in your browser. Nothing is transmitted to our servers.