CSS Gradient Generator — Linear & Radial
Build linear and radial CSS gradients visually. Add as many colour stops as you need, drag angles, copy ready-to-paste CSS.
Why CSS gradients?
Gradients give visual depth without an image file. They scale infinitely, take zero network requests, and animate smoothly. CSS gradients are everywhere on the modern web — hero backgrounds, button surfaces, card highlights, dark-mode subtle tones, decorative overlays — and modern browsers render them in hardware for maximum performance.
Linear vs. radial
- Linear gradient — colours blend along a straight line at a specified angle. Most common type.
linear-gradient(135deg, #3b82f6, #8b5cf6). - Radial gradient — colours blend outward from a centre point. Creates spotlight, vignette and orb effects.
radial-gradient(circle, #fff, #000).
Colour stops
A gradient transitions between colour stops. Each stop is a colour + position (0–100%). At least two stops are required. Multiple stops let you create complex transitions — sunset gradients, rainbow effects, soft-then-hard fades.
- Soft fade — 2 stops, evenly distributed.
- Hard stop — 2 adjacent stops at the same position create a sharp colour boundary.
- Multi-colour — 3+ stops at different positions for rich blends.
Common gradient recipes
- Subtle UI background:
linear-gradient(180deg, #f8fafc, #e2e8f0). - Hero with dark text:
linear-gradient(135deg, #fef3c7, #fde68a). - Modern brand purple:
linear-gradient(135deg, #3b82f6, #8b5cf6). - Sunset:
linear-gradient(135deg, #f97316, #ec4899, #8b5cf6). - Glass overlay:
linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)).
FAQs
Are CSS gradients supported in all browsers?
Yes — supported since 2011. Modern syntax (color-interpolation, conic-gradient) is wide-spread but not universal.
Do gradients hurt performance?
No — modern browsers render them in hardware. They're often faster than equivalent image backgrounds.