Pick the colors, the type and the angle and watch the preview. The CSS is ready to paste into a stylesheet, and the same gradient can be saved as a PNG up to 4K for a wallpaper or a video background.
How to use the Gradient Generator tool
- Choose two or more colors, or press Random.
- Set the type and the angle.
- Copy the CSS or download a PNG in the size you need.
Tips for the best result
- Colors that sit near each other on the color wheel blend most smoothly.
- A 135 degree angle, top left to bottom right, suits most buttons and headers.
Quick facts
| Price | Free |
|---|---|
| Works with | CSS, PNG |
| Where it runs | In your browser, on your device |
| Account | Not needed |