CSS gradients

Gradient functions

linear-gradient(angle, stops)

Runs along a line. 0deg points up and 90deg to the right, or use keywords like to right or to top left. The default is to bottom.

radial-gradient(shape size at x y, stops)

Grows out from a point. The shape is circle or ellipse, the size a length or closest-side, closest-corner, farthest-side or farthest-corner (the default).

conic-gradient(from angle at x y, stops)

Sweeps around a point, like a clock hand. Stops take angles or percentages of the full turn.

repeating-*-gradient()

Repeats the stop list over and over. The distance between the first and last stop is the size of one repeat.

Color stops

red 20%

A color at a position.

red 20% 40%

Two positions make a solid band from 20% to 40%.

red 50%, blue 50%

Two stops at the same spot give a hard edge instead of a fade.

red 50%, blue 0

A position lower than the one before it is pulled up to match, so 0 is a short way to write a hard edge.

red, 30%, blue

A position on its own is a hint, it moves the midpoint of the fade.

Color space

Add in and a color space after the direction, like linear-gradient(to right in oklch, …). Hex, rgb() and hsl() colors fade in srgb by default, which often goes muddy in the middle. Modern colors like oklch() default to oklab. Polar spaces (hsl, lch, oklch) also take a hue direction:shorter hue (the default), longer hue,increasing hue or decreasing hue.

Good to know

• A gradient is an image, so it goes in background-image and you can stack several with commas. The first one is on top.
• background-image does not transition. Register a custom property with @property and animate that inside the gradient instead.
• Fading to transparent no longer turns grey in the middle, modern browsers mix with premultiplied alpha.
• For gradient text, use background-clip: text with color: transparent.
• For a gradient border, use border-image: linear-gradient(…) 1. It ignores border-radius, so for rounded corners use a transparent border with two backgrounds: a solid one on padding-box and the gradient on border-box.