CSS Gradient Generator
Design a linear gradient visually with two colour pickers and an angle slider, preview it at any size, and copy the matching CSS snippet ready to paste into your stylesheet. If you need an image file instead — for email templates, slide decks, or static exports — download the gradient as a PNG at any dimension without touching a design tool.
How to create a CSS gradient
- Pick the start colour with the first swatch. Type a hex code if you need to match a specific brand colour.
- Pick the end colour the same way. For smooth transitions, choose hues close on the colour wheel.
- Drag the angle slider to orient the gradient. 90 degrees is left-to-right, 180 is top-to-bottom, 45 is diagonal.
- Copy the CSS snippet to use in your stylesheet, or click Download PNG to export the gradient as a raster image.
Common use cases
- Building hero-section backgrounds that transition between two brand colours without shipping an image.
- Creating button states that use a subtle gradient to suggest depth without the weight of a drop shadow.
- Exporting PNG gradients for email templates where CSS gradient support is inconsistent across clients.
- Generating background art for slide decks and social posts where you need an image file, not CSS.
Frequently asked questions
Why does the gradient look banded?
Two-colour gradients over a wide area can show visible bands on 8-bit-per-channel displays. This is a display limitation, not a tool one — for large UI backgrounds, add a tiny amount of dithering in your compositor or use a PNG export with subtle noise.
Can I add more than two colours?
This tool focuses on two-stop gradients because they cover the vast majority of UI use cases. For multi-stop gradients, extend the CSS snippet manually — the syntax is linear-gradient(angle, color1 0%, color2 50%, color3 100%).
What size should the PNG be?
Match the area where the gradient will live. For hero backgrounds, 2560 wide covers retina screens; for a button background, 400 wide is usually enough.
Is my work uploaded anywhere?
No. The preview and export run entirely on the Canvas in your browser. Nothing leaves your device.
About CSS gradients
A CSS gradient interpolates smoothly between colour stops along a defined direction, giving you smooth transitions without the bandwidth cost of an image file. Linear gradients are the most common variant and the one this tool focuses on — pick two anchor colours, choose an angle and the browser generates the transition mathematically at any viewport size. For cases where CSS is not supported (older email clients, slide exports, printed material) the PNG export is a faithful raster of the same gradient.
- Two colour pickers with hex input
- Adjustable angle from 0 to 360 degrees
- Copy-ready CSS snippet
- PNG export at any target dimension
- Live preview updates as you tweak
- Runs entirely in the browser, no server calls
Free. No signup. No file uploads. Ads via AdSense (consent required).
By Marco B. ·