How to make a CSS gradient
- Pick Linear, Radial or Conic, then set the angle or the centre. Or click a preset under Start from.
- Edit the colour stops: type a colour or pick one, type a position in percent, or drag a stop along the strip. Click the strip to add a stop there; select a stop and press Delete to remove it.
- Press Copy CSS to copy the full background line, or Copy value only for just the gradient.
Writing gradients by hand
The generator writes standard CSS, so you can change it later without the tool. A linear gradient looks like linear-gradient(90deg, #0b6b52 0%, #f2d492 100%): the direction first, then each colour with its position. Positions are optional; with none, the browser spaces the stops evenly. You can also write a direction in words, such as to right or to bottom right.
A gradient is an image, not a colour, so it goes in background or background-image, never in color or background-color. That also means you can layer it: background: linear-gradient(...), url(photo.jpg); puts a see-through gradient over a photo, a common way to keep white text on a picture readable.
Tips for good-looking gradients
Colours that sit near each other on the colour wheel blend cleanly. Opposite colours, such as orange and blue, pass through grey in the middle with standard mixing; switch to OKLab or add a middle stop to keep the blend lively. Gentle gradients with a small change in lightness tend to look better as page backgrounds than strong rainbow blends, and they leave text easy to read. Check any text you put on a gradient with the color contrast checker at its lightest and darkest point.