🎨 CSS Gradient Generator
Build linear, radial, and conic gradients with a live preview and copy-ready CSS
Angle: 90°
Color stops (2 / 5)
0%
100%
Generated CSS
background: linear-gradient(90deg, #ff512f 0%, #f09819 100%);
Design CSS gradients visually and copy the code. Build linear, radial or conic gradients with as many colour stops as you like, adjust angles and positions with a live preview, and copy the ready-to-use CSS.
Frequently asked questions
How do I make a CSS gradient?
Pick a gradient type — linear, radial or conic — then add colour stops and drag them into position. The preview updates live and the matching CSS is generated for you to copy straight into your stylesheet.
What is the difference between linear, radial and conic gradients?
Linear gradients blend colours along a straight line at an angle you set. Radial gradients spread outwards from a centre point in a circle or ellipse. Conic gradients sweep colours around a centre point like a colour wheel — useful for pie-chart effects.
Can I use more than two colours?
Yes. Add as many colour stops as you need and position each one along the gradient. Adjacent stops with the same position create hard colour bands instead of smooth blends.