CSS Gradient Generator
Choose two colours and an angle to generate CSS gradient code you can copy straight into your stylesheet.
How to use the CSS Gradient Generator
- Set the two colour boxes to your start and end colours. The preview redraws as you change them.
- Type an angle in degrees. 0 runs bottom to top and 90 runs left to right.
- Press copy, then paste the finished declaration into the CSS rule you want it in.
How CSS reads the angle you type
The angle names the direction the gradient travels towards, measured clockwise from straight up. The field is read as a whole number, so decimals are cut off and a blank box counts as 0.
| Angle | Direction of travel |
|---|---|
| 0deg | bottom to top |
| 45deg | bottom left to top right |
| 90deg | left to right |
| 180deg | top to bottom |
| 270deg | right to left |
What the generated declaration leaves out
The output is one background declaration with two colour stops and no stop positions, giving an even blend end to end. It builds linear gradients only, so radial, conic and repeating variants are not produced. You can add further stops by hand inside the same parentheses.
Frequently asked questions
How do I use the code?
Press copy and paste it into the background property of your CSS rule.
Can I use more than two colours?
Two colours in the current version.
How do the angles work?
0 degrees runs bottom to top and 90 degrees runs left to right, following the CSS specification.
Can I fade one end to transparent?
Not from the colour boxes, which return solid hex values. Paste the line into your stylesheet and swap one hex value for an rgba() colour with a low alpha.
Where does the copied line go?
Inside the rule for the element you want to paint, such as .hero { background: linear-gradient(90deg, #ff0000, #0000ff); }. The property name and semicolon are already there.
Do I still need vendor prefixes?
No. Unprefixed linear-gradient is supported by every current browser, so the generated line works as it is.