Gradients
Functions that generate an <image> of smoothly changing colour, so they work anywhere an image does: background-image, border-image, mask-image and list-style-image. A gradient has no natural size and fills whatever box it is painted into. The colours inside are any colour function; other image functions such as image-set() are under Shapes & images.
Gradients
linear-gradient()
Colours that change along a straight line. The line's direction is an angle (0deg points up, 90deg right) or a side or corner such as to right or to top left; the default is to bottom.
| Syntax | linear-gradient( [ <linear-gradient-syntax> ] ) |
|---|---|
| Returns | <image> |
| Support | linear-gradient(): Chrome 26 · Firefox 16 · Safari 7Interpolation colour space ( in): Chrome 111 · Firefox 127 · Safari 16.2 |
| Spec | css-images-3 |
<linear-gradient-syntax> is [ [ <angle> | <zero> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list>. The colour stop list is shared by every gradient on this page:
| Part | Effect |
|---|---|
red | A colour stop. Stops without positions are spread evenly. |
red 20% | A stop at a set position along the gradient line. |
red 20% 40% | Two positions: a solid band of that colour. Two stops at the same position give a hard edge. |
30% between two stops | A colour hint: moves the midpoint of the transition between its neighbours. |
in oklch | The colour space the transition is calculated in. The default is oklab; legacy sRGB colours such as hex and rgb() blend in srgb unless you set one. |
background: linear-gradient(to right, #ffd21a, #ff5a1f);
background: linear-gradient(135deg in oklch, oklch(80% 0.15 90), oklch(60% 0.2 300));
background: linear-gradient(transparent 50%, rgb(0 0 0 / 0.6));radial-gradient()
Colours that radiate outwards from a centre point as a circle or an ellipse. You can set the shape, its size (a length, two lengths for an ellipse, or a keyword such as closest-side or farthest-corner) and the centre with at <position>.
| Syntax | radial-gradient( [ <radial-gradient-syntax> ] ) |
|---|---|
| Returns | <image> |
| Support | Chrome 26 · Firefox 16 · Safari 7 |
| Spec | css-images-3 |
<radial-gradient-syntax> is [ [ [ <radial-shape> || <radial-size> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <color-stop-list>. The default is an ellipse that reaches the farthest corner, centred in the box.
background: radial-gradient(circle at 30% 20%, #fff8, transparent 40%);conic-gradient()
Colours that change around a centre point, like the hands of a clock. Stops are positioned by angle or percentage of a full turn. Useful for pie charts and colour wheels.
| Syntax | conic-gradient( [ <conic-gradient-syntax> ] ) |
|---|---|
| Returns | <image> |
| Support | Chrome 69 · Firefox 83 · Safari 12.1 |
| Spec | css-images-4 |
<conic-gradient-syntax> is [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>: an optional starting angle, an optional centre, and stops positioned by angle.
background: conic-gradient(#ffd21a 0 40%, #1f6fff 0 75%, #ddd 0);
border-radius: 50%;Repeating gradients
repeating-linear-gradient()
A linear gradient whose colour stops repeat along the line. The distance from the first stop to the last becomes one tile, repeated in both directions to fill the box.
| Syntax | repeating-linear-gradient( [ <linear-gradient-syntax> ] ) |
|---|---|
| Returns | <image> |
| Support | Chrome 26 · Firefox 16 · Safari 7 |
| Spec | css-images-4 |
background: repeating-linear-gradient(45deg, #ffd21a 0 10px, #222 10px 20px);repeating-radial-gradient()
A radial gradient whose colour stops repeat outwards, giving concentric rings.
| Syntax | repeating-radial-gradient( [ <radial-gradient-syntax> ] ) |
|---|---|
| Returns | <image> |
| Support | Chrome 26 · Firefox 16 · Safari 7 |
| Spec | css-images-4 |
repeating-conic-gradient()
A conic gradient whose colour stops repeat around the turn, giving rays or a starburst.
| Syntax | repeating-conic-gradient( [ <conic-gradient-syntax> ] ) |
|---|---|
| Returns | <image> |
| Support | Chrome 69 · Firefox 83 · Safari 12.1 |
| Spec | css-images-4 |
background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 20px 20px;