Give color
direction.
Preview a custom linear gradient as you edit its colors and angle. Copy the CSS or export a 1200 × 800 PNG.
01 / YOUR COLORS
Shape the fade.
02 / LIVE PREVIEW
PNG export is 1200 × 800 pixels. CSS can fill any element size.
/ HOW IT WORKS
From idea to file.
- Choose a starting color and ending color.
- Set the angle to control the direction.
- Copy the CSS or export a PNG background.
/ GOOD TO KNOW
Questions, answered.
Can I use the CSS in a website?
Yes. Paste the copied background rule into your CSS class.
What size is the PNG?
The downloaded gradient image is 1200 by 800 pixels.
Does this tool upload anything?
No. Gradient preview and PNG export happen in your browser.