CSS Gradient Generator

Design linear or radial CSS gradients and copy the code.

About this tool

Pick colors, an angle and a type, preview the result live and copy ready-to-use CSS.

How to use CSS Gradient Generator

  1. Choose linear or radial.
  2. Set the colors and angle.
  3. Copy the CSS into your stylesheet.

Frequently asked questions

Do gradients work in all browsers?

Yes. Modern browsers support linear-gradient and radial-gradient without prefixes.

Can I add more colors?

Use the optional middle color to create a three-stop gradient.