CSS Gradient Generator

How CSS gradients are built

A gradient is a generated image, not a color, so it lives inbackground-image rather than background-color. The two you reach for most are linear-gradient(), which blends along a straight line, and radial-gradient(), which blends outward from a center point. A linear gradient starts with a direction (an angle like 45deg or a keyword liketo right) followed by two or more color stops. Each stop is a color plus an optional position, and the browser interpolates the colors between them.

Controlling the blend with stops

Stop positions decide where a color is at full strength. Put two stops at the same position and the transition becomes a hard line instead of a fade, which is how you make stripes or a two-tone split with a single gradient. Radial gradients add shape (circle orellipse) and a size keyword such asfarthest-corner that sets how far the last stop reaches.

Examples

A diagonal two-color fade:

background-image: linear-gradient(135deg, #6366f1, #ec4899);

A hard split with no blend, using doubled stops:

background-image: linear-gradient(
  to right,
  #0ea5e9 0% 50%,
  #22c55e 50% 100%
);

FAQ

Why is my gradient a flat color? Usually it is set onbackground-color by mistake, or the element has no height. Gradients need a box with size to show the blend.

Can I stack gradients? Yes. List several inbackground-image separated by commas; the first is painted on top. Pair that with transparency to overlay a tint on a photo.

Why does the midpoint look muddy? Blending through sRGB can pass through a dull gray. Picking stops that share hue or adding an intermediate stop keeps the middle clean.