Developer Tools
CSS Gradient Generator
Linear and radial gradients with live preview and copy-ready CSS.
✓ Free
✓ No account
◉ Runs on this device
Developer Tools
Powering up the tool…
TOOL CSS-GRADIENT
What this tool does
About the css gradient generator
Two colours, an angle, honest banding advice.
How to use it
- Enter the two colours.
- Pick linear (with angle) or radial.
- Judge the live preview.
- Copy the one-line CSS.
Useful for
- Make a hero background without a design tool.
- Match a gradient to brand colours.
- Get the exact CSS line, no screenshots.
Straight answers
CSS Gradient Generator FAQ
Why does my gradient show bands?
Big perceptual jumps across few pixels — especially between saturated complements. A midpoint stop, closer colours, or a hint of shared hue smooths it; the preview shows banding before your users do.
Which angle does what?
0deg points up, 90deg right — the gradient line rotates clockwise. 135deg (top-left to bottom-right) is the quietly universal default for a reason.