▨
CSS Gradient Generator
Create beautiful linear or radial CSS gradients with unlimited color stops, adjustable angle and a live preview. Copy production-ready background CSS instantly.
0%
100%
background: linear-gradient(135deg, #2f6bff 0%, #8b5cf6 100%);🔒 This tool runs entirely in your browser. Your data is never uploaded.
Frequently asked questions
What gradient types can I make?＋
Linear and radial CSS gradients with multiple colour stops and an adjustable angle or position.
Does it output copy-paste CSS?＋
Yes — it generates the ready-to-use background property that you can drop straight into your stylesheet.
Can I use more than two colours?＋
Yes — add as many colour stops as you like and position each one along the gradient.