Color & design
CSS gradient generator
Build a linear or radial CSS gradient with a live preview. Set colors and angle, copy the CSS, and download a high-resolution PNG background.
Free to useNo sign-upOn your device
Opening your workspace…
How to use it
- 01
Choose two colors and a linear or radial style.
- 02
Adjust the angle and preview the gradient.
- 03
Copy the CSS or download a PNG background.
A few useful answers
Can I use the output without an image?
Yes. Copy the CSS background declaration into your stylesheet.
What size is the PNG?
The download is generated at 1920 by 1080 pixels for use as a landscape background.