🎨 Color Tools
CSS Gradient Generator
Build linear and radial CSS gradients visually. Multiple colour stops. Copy CSS instantly. Free.
Gradient
CSS · click to copy
How to use the Gradient
1
Linear vs radial
Linear gradients transition from one colour to another along a straight line. Radial gradients radiate outward from a centre point. Both support unlimited colour stops at percentage positions — 0% is the start, 100% is the end. CSS gradients are pure CSS, so they scale without quality loss and don't require image downloads.