Design

CSS gradient generator

Build a two-colour linear gradient and copy the CSS.

Loading tool…

  1. 1 Choose the two colours.
  2. 2 Set the angle in degrees.
  3. 3 Copy the CSS into your stylesheet.
  4. 4 Check the preview on a real element, because the page background can change how it feels.

How it works

Pick two colours and an angle. The preview updates immediately and the CSS background value is ready to copy. The output is a single linear-gradient with two stops. Add more stops in your stylesheet if you need them; this page stays on the common case.

background: linear-gradient(angle, colour1, colour2);

Frequently asked questions

Which way is 0 degrees?

In CSS, 0deg points upward and angles increase clockwise. 90deg runs left to right.

Can I add a third colour?

Not in this generator. Paste the CSS and add another colour stop by hand.