CSS Gradient Generator

Build linear, radial and conic gradients, check text contrast and copy CSS or Tailwind.

Live preview

Type

Angle

135°

Your gradient

Linear 135°

Stops 3

Text —

Fallback

—

White text

—

Black text

—

Build your gradient

Text on top

Color stops

Blending

Fallback

The same type and angle as the panel at the top.

Angle0° points up

Repeat the stopsFor stripes and patterns. The last stop must be below 100% for anything to repeat

Up to 8. Opacity below 100% shows the checkerboard behind it.

Click the bar to add a stop at that point.

How the CSS is written.

BlendingOKLCH and OKLab add a second line for current browsers. Propertybackground-image keeps other background settings.

Add a fallback colorA solid average color first, for HTML email and very old browsers Add commentsShort notes that explain each line

background: linear-gradient(135deg, #4f46e5 0%, #c026d3 50%, #f97316 100%);

The checkerboard shows through transparent parts.

Starting points. Loading one replaces the current gradient.