CSS Gradient Generator
Design ToolsCreate linear & radial CSS gradients
FreePrivateInstant
Similar tools you may like
History
All history →CSS Gradient Generator — at a glance
Pick your colors, set the angle and copy the CSS for a smooth gradient background.
#6366f1
#ec4899
135°
Run
background: linear-gradient(135deg, …)
How to use it — step by step
Nothing to paste. Choose colors and direction, then generate.
1
Choose options
Pick the mode and options that fit what you need.
2
Generate Gradient
Press the button. The result is created instantly on your device.
3
Copy the result
Check the output and press Copy to use it anywhere.
Pro tips
Small things that make the result better.
✦135° gives a diagonal gradient from top-left to bottom-right.
✦Use colors that sit close on the color wheel for a soft look.
✦Add a solid background-color as a fallback for old browsers.
Quick facts
Linear & radialtwo types
3 colorssupported
Live previewbefore copying
Freeno signup
Frequently Asked Questions
How do I use the CSS?+
Paste the copied line into any CSS rule, for example inside body or .hero.
What does the angle do?+
0° goes bottom to top, 90° left to right, 180° top to bottom.
Can I use more than three colors?+
Not here, but in CSS you can list as many colors as you like separated by commas.
Is my data safe?+
Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.
More Free Tools
Guides you might like
All guides →Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to usePX to REM Converterpx vs rem: why your font sizes should be allowed to scaleAspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprisesColor Contrast CheckerIs your text readable? The contrast ratio, explained