CSS gradient generator

Build linear and radial gradients from color stops and copy the CSS.

Color stops

Built in this browser. Nothing is sent anywhere.

Hex colors only (#rrggbb). Stops are sorted by position in the output.

Preview
background: linear-gradient(135deg, #336699 0%, #d4a017 100%);

How to use

  1. Set color stops and positions.
  2. Choose linear or radial and the angle.
  3. Copy the CSS.

What it supports

Hex colors (#rrggbb) and percentage positions only — rgba and named colors are not supported. Stops are sorted by position in the output.

Related tools

Related guides