CSS Gradient Generator
Build & copy CSS gradients.
CSS Gradient Generator at a glance
CSS Gradient Generator is a free online developer tool you can use right now to build & copy CSS gradients โ no account, no install and no usage limit. It runs entirely inside your browser, so whatever you enter stays on your own device.
- Price
- Free โ no trial, no paid tier, no watermark
- Sign-up
- Not required
- Where it runs
- In your browser โ nothing is uploaded to a server
- Works on
- Chrome, Safari, Firefox and Edge โ desktop, tablet and phone
- Category
- Developer Tools
About CSS Gradient Generator
Build a CSS gradient by adjusting colours, stop positions and angle, then copy the finished declaration. The preview updates live, which is considerably faster than editing values in a stylesheet and reloading.
Gradient angles in CSS are less intuitive than they look. 0deg points upward and angles increase clockwise, so 90deg runs left to right and 180deg runs top to bottom. This differs from the mathematical convention where 0 points right and angles increase anticlockwise, which is why a gradient often appears rotated a quarter turn from what you expected.
The most common quality problem with gradients is a muddy grey band through the middle, and it has a specific cause. Browsers interpolate between colours in sRGB, so blending two saturated complementary colours passes through a desaturated midpoint โ blue to yellow goes through grey rather than through green. The practical fix is to add an intermediate colour stop that keeps saturation up through the transition, or to choose endpoint colours closer together on the colour wheel.
For subtle background gradients, keep the endpoints close in hue and vary lightness instead. A gradient between two lightness values of the same hue reads as depth; one between two distant hues reads as decoration and dates quickly.
How to use CSS Gradient Generator
- Pick your start and end colours, and add intermediate stops if you want them.
- Choose linear or radial and set the angle or shape.
- Copy the generated CSS straight into your stylesheet.
Frequently asked questions
Why does my gradient look rotated?
CSS gradient angles start with 0deg pointing up and increase clockwise, unlike the mathematical convention. 90deg is left to right, 180deg is top to bottom. If a gradient is a quarter turn off, this is why.
Why is there a grey band in the middle of my gradient?
Browsers interpolate in sRGB, so blending two saturated complementary colours passes through a desaturated midpoint. Add an intermediate stop that keeps saturation high through the transition, or pick endpoints closer together on the colour wheel.
What is the difference between linear and radial?
A linear gradient blends along a straight line at the angle you set. A radial gradient blends outward from a point in a circle or ellipse. Linear suits backgrounds and buttons; radial suits spotlight and glow effects.
Do gradients work in all browsers?
Yes. Unprefixed linear-gradient and radial-gradient have been supported in every current browser for many years. Vendor prefixes are no longer needed unless you are supporting genuinely ancient versions.