CSS gradient generator

The three kinds of gradient

• linear-gradient(): colours progress in a straight line. The angle sets the direction: 180deg runs top to bottom (the default) and 90deg left to right.
• radial-gradient(): colours spread out from a point, as a circle or an ellipse. Good for glows and vignettes.
• conic-gradient(): colours turn around a centre, like a wheel. Useful for pie charts, colour wheels and metallic backgrounds.

Colour stops

Each stop is a colour and a position: #2563eb 0%, #db2777 100%. If two stops share a position the change is sharp instead of gradual, which is how stripes are made:

background: linear-gradient(90deg, #2563eb 50%, #db2777 50%);

A gradient over an image

To make a headline readable over a photo, put a gradient from transparent black to semi-opaque black in front of it. In CSS, background layers are separated by commas and the first one is on top:

.hero {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%),
    url("photo.jpg") center / cover;
}

To build it before the photo exists, use one from ximg.es: url("https://ximg.es/random/1600x900?seed=hero").

Tips

• Between two very different colours (blue and yellow, say) the middle can turn greyish. Add an intermediate stop or interpolate in another colour space: linear-gradient(in oklch 90deg, …), supported by current browsers.
• For gradient text, combine background-clip: text with color: transparent.
• repeating-linear-gradient() and friends repeat the pattern: perfect for stripes and grids without images.