CSS Gradient Generator
Pick two colors, choose linear or radial and set the angle. Preview the gradient and copy the CSS.
How it works
- 1
Pick two colors
HEX codes for the start and end.
- 2
Choose type and angle
Linear with any angle, or radial.
- 3
Copy the CSS
Paste it into your stylesheet.
Related tools
Other tools people use right after this one.
Built to get out of your way
487
Tools available
6
Languages
0
Watermarks added
2h
Until your files are erased
100%
Free to start
∞
Devices supported
Frequently asked questions
0deg goes bottom to top, 90deg left to right, 180deg top to bottom.
Gradients without the guesswork
CSS gradients replace background images with a single line of code: fast to load, sharp on any screen and easy to change. Linear gradients follow an angle (90deg goes left to right); radial gradients spread out from the center.
The tool shows a live preview and outputs the background declaration, so you can paste it straight into your CSS. Nothing is uploaded.