Gradient Generator

Make a two-colour CSS linear gradient and copy the code. It runs in your browser.

How to use it

1. Enter the start and end colours as HEX codes.
2. Choose an angle: 0, 45, 90, 135, 180, 225, 270 or 315 degrees.
3. Copy the CSS.

Example

Start #ff7e5f, end #feb47b and 135° give:

background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);

Reading the angle

0° runs from bottom to top, 90° from left to right, 180° from top to bottom, and 135° diagonally from the top left to the bottom right.

Good to know

The generator makes linear gradients with two colours. For three or more, add colour stops by hand; for radial or conic gradients use radial-gradient() or conic-gradient(). A gradient is a background image in CSS, so set it with background, not color. If text sits on it, check contrast against both ends with the Contrast Checker. Gradients between very different hues can look muddy in the middle.

See the guide and the glossary entry.

FAQs