Gradients add depth to buttons, headers and backgrounds without an image download. The syntax is short, but the angle can take a moment to picture.
What you get
Enter two colours and an angle in the Gradient Generator. Start #ff7e5f, end #feb47b and 135° gives:
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
Paste that into a CSS rule for any element.
Reading the angle
- 0° runs from bottom to top.
- 90° runs from left to right (the default).
- 180° runs from top to bottom.
- 135° runs diagonally from the top left to the bottom right.
The tool offers eight angles, from 0° to 315° in steps of 45.
Using the tool
- Enter the start and end colours as hex codes.
- Pick an angle.
- Copy the CSS.
Design notes
- The generator makes two-colour gradients. For three or more colours, edit the CSS by hand and add more colour stops with their positions.
- If text sits on a gradient, check contrast against both ends with the contrast checker.
- Gradients between very different hues can pass through a muddy middle; choose neighbouring hues for a smoother blend.
Frequently asked questions
Do all browsers support it?
Yes. Linear gradients have been supported by all current browsers for many years, with no prefix needed.
Can I make a radial gradient?
This tool produces linear gradients only. Radial gradients use a different function, radial-gradient(), which you can write by hand.