CSS Gradient Generator

Pick colours, set the angle and copy a ready-made CSS background rule. A live preview updates as you adjust.

Add a middle colour

Runs in your browser. What you enter here is not sent to our server.

  • Linear and radial gradients
  • Optional third colour
  • Copy-ready CSS

How to use the CSS Gradient Generator

  1. Pick a start and an end colour.
  2. Choose linear or radial and set the angle.
  3. Copy the CSS and paste it into your stylesheet.

Getting smooth gradients

Gradients between two very different hues can pass through a dull grey in the middle. Adding a middle colour that sits between them on the colour wheel keeps the blend lively. If text sits on top of the gradient, check it against both ends with the Contrast Checker.

Questions about the CSS Gradient Generator

Do CSS gradients work in every browser?

Yes. The standard syntax produced here is supported by all current browsers without prefixes.

What does the angle mean?

0deg runs from bottom to top, 90deg from left to right and 180deg from top to bottom.