CSS Gradient Generator
Design a smooth CSS gradient in seconds. Pick two or three colours, set the angle, preview it live, then copy the ready-to-paste CSS or download the gradient as a PNG image.
Your CSS code
Paste this into your stylesheet:
Advertisement
How to use
- Pick two colours — or tick the box to add a third — and set the angle with the slider.
- Watch the live preview update as you change colours, angle or type.
- Click Copy CSS to paste the gradient into your site, or Download as PNG to save it as an image.
Frequently asked questions
What is a CSS gradient?
A gradient is a smooth blend from one colour to another, drawn by the browser with CSS — no image file needed. The code this tool gives you works in any modern browser.
What does the angle do?
For a linear gradient, the angle sets the direction of the blend: 90° goes left to right, 180° goes top to bottom, and 0° goes bottom to top.
What is the difference between linear and radial?
Linear blends colours along a straight line in one direction. Radial blends outwards from a centre point, like a glow.
What size is the downloaded PNG?
1200 × 630 pixels — a common size for social media link previews and website banners.