All tools

CSS Gradient Generator

Build a linear or radial gradient and copy the CSS.

0%
100%
CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

About

Pick gradient type (linear or radial), add color stops, and drag them along the bar. The live preview and CSS update together. Save the result as a CSS background or copy as an SVG.

How to use

  1. Pick linear or radial.
  2. Add and drag color stops.
  3. Copy the CSS.

FAQ

How do I get smoother gradients?+

Add a stop or two in the middle and pick interpolated colors there. The default linear interpolation can look muddy when you blend across very different hues, like blue and yellow.