Background
linear-gradient()
linear-gradient() creates an image of two or more colors transitioning along a straight line. Use it with properties that accept an image, such as background or background-image.
Syntaxlinear-gradient( …
linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> <length-percentage>{0,2}
<linear-color-hint> = <length-percentage>Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
background: linear-gradient(
135deg,
#88d1c7 0%,
#77a7d7,
#eaac3a 100%
);
}Controls
linear-gradient()
repeating-
direction135deg
color-stop-list
Drag the markers to move stops
#88d1c7 0%
Color
Position
Second position
#77a7d7
Color hint (midpoint from previous)
Color
Position
#eaac3a 100%
Color hint (midpoint from previous)
Color
Position
Second position
About
Direction
0degpoints from bottom to top, and angles increase clockwise.90degequalsto rightand180degequalsto bottom.- Without a direction you get
to bottom(180deg). - With a corner such as
to top right, the actual angle depends on the element’s aspect ratio. Resize the preview from its bottom-right corner to see it change.
Color stop positions
- Stops without a position are spread evenly between their positioned neighbors. The first stop defaults to
0%and the last to100%. - Two positions, as in
red 20% 40%, make that range a solid color. - A position smaller than the previous one is clamped to it, which gives you hard edges and stripes.
Color hints
A bare position between two colors (red, 20%, blue) moves the midpoint of the transition to that spot.
repeating-linear-gradient()
Repeats the span from the first to the last stop across the whole element. It makes a difference when the last stop has a px or small % position.