The
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
7 CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
8 data type, which is a special kind of
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
9.
/* A gradient tilted 45 degrees,
starting blue and finishing red */
linear-gradient[45deg, blue, red]
/* A gradient going from the bottom right to the top left corner,
starting blue and finishing red */
linear-gradient[to left top, blue, red]
/* Interpolation in rectangular color space */
linear-gradient[in oklab, blue, red]
/* Interpolation in polar color space */
linear-gradient[in hsl, blue, red]
/* Interpolation in polar color space
with longer hue interpolation method */
linear-gradient[in hsl longer hue, blue, red]
/* Color stop: A gradient going from the bottom to top,
starting blue, turning green at 40% of its length,
and finishing red */
linear-gradient[0deg, blue, green 40%, red]
/* Color hint: A gradient going from the left to right,
starting red, getting to the midpoint color
10% of the way across the length of the gradient,
taking the rest of the 90% of the length to change to blue */
linear-gradient[.25turn, red, 10%, blue]
/* Multi-position color stop: A gradient tilted 45 degrees,
with a red bottom-left half and a blue top-right half,
with a hard line where the gradient changes from red to blue */
linear-gradient[45deg, red 0 50%, blue 50% 100%]
The position of the gradient line's starting point. If specified, it consists of the word
linear-gradient[red 10%, 30%, blue 90%];
1 and up to two keywords: one indicates the horizontal side [
linear-gradient[red 10%, 30%, blue 90%];
2 or
linear-gradient[red 10%, 30%, blue 90%];
3], and the other the vertical side [
linear-gradient[red 10%, 30%, blue 90%];
4 or
linear-gradient[red 10%, 30%, blue 90%];
5]. The order of the side keywords does not matter. If unspecified, it defaults to
linear-gradient[red 10%, 30%, blue 90%];
6.
The values
linear-gradient[red 10%, 30%, blue 90%];
7,
linear-gradient[red 10%, 30%, blue 90%];
6,
linear-gradient[red 10%, 30%, blue 90%];
9, and
linear-gradient[red 40%, yellow 30%, blue 65%];
0 are equivalent to the angles
linear-gradient[red 40%, yellow 30%, blue 65%];
1,
linear-gradient[red 40%, yellow 30%, blue 65%];
2,
linear-gradient[red 40%, yellow 30%, blue 65%];
3, and
linear-gradient[red 40%, yellow 30%, blue 65%];
4, respectively. The other values are translated into an angle.
linear-gradient[red 40%, yellow 30%, blue 65%];
5
The gradient line's angle of direction. A value of
linear-gradient[red 40%, yellow 30%, blue 65%];
1 is equivalent to
linear-gradient[red 10%, 30%, blue 90%];
7; increasing values rotate clockwise from there.
A color-stop's
linear-gradient[red 40%, yellow 30%, blue 65%];
9 value, followed by one or two optional stop positions, [each being either a
linear-gradient[red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%];
linear-gradient[red, orange 10% 30%, yellow 50% 70%, green 90%];
linear-gradient[red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%];
0 or a
linear-gradient[red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%];
linear-gradient[red, orange 10% 30%, yellow 50% 70%, green 90%];
linear-gradient[red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%];
1 along the gradient's axis].
An interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
As with any gradient, a linear gradient has ; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.
To create a linear gradient that repeats to fill its container, use the
linear-gradient[red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%];
linear-gradient[red, orange 10% 30%, yellow 50% 70%, green 90%];
linear-gradient[red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%];
3 function instead.
Because
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
8s belong to the
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
9 data type, they can only be used where
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
9s can be used. For this reason,
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
7 won't work on
linear-gradient[red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%];
linear-gradient[red, orange 10% 30%, yellow 50% 70%, green 90%];
linear-gradient[red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%];
8 and other properties that use the
linear-gradient[red 40%, yellow 30%, blue 65%];
9 data type.
A linear gradient is defined by an axis—the gradient line—and two or more color-stop points. Each point on the axis is a distinct color; to create a smooth gradient, the
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
7 function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.
[|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] to []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets][?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark] ,
= [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] left [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] right []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [||][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
double%5Fbar]
[[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] top [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] bottom []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets]
= , [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark] , []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets][#][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
hash%5Fmark]
= [?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark]
=
= [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar]
3 stop, the first color declared will be at that point. Similarly, the last color will continue to the
= linear-gradient[ [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] ]
= [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] to []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets][?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark] ,
= [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] left [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] right []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [||][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
double%5Fbar]
[[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] top [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] bottom []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets]
= , [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark] , []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets][#][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
hash%5Fmark]
= [?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark]
=
= [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar]
4 mark, or be at the
= linear-gradient[ [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] ]
= [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] to []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets][?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark] ,
= [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] left [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] right []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [||][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
double%5Fbar]
[[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] top [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] bottom []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets]
= , [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark] , []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets][#][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
hash%5Fmark]
= [?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark]
=
= [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar]
4 mark if no length has been declared on that last stop.
= linear-gradient[ [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] ]
= [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] to []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets][?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark] ,
= [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] left [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] right []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [||][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
double%5Fbar]
[[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] top [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar] bottom []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets]
= , [[][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets] [?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark] , []][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
brackets][#][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
hash%5Fmark]
= [?][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
question%5Fmark]
=
= [|][//developer.mozilla.org/en-US/docs/Web/CSS/Value%5Fdefinition%5Fsyntax
single%5Fbar]
body {
width: 100vw;
height: 100vh;
}
body {
background: linear-gradient[45deg, red, blue];
}
body {
width: 100vw;
height: 100vh;
}
body {
background: linear-gradient[135deg, orange 60%, cyan];
}
body {
width: 100vw;
height: 100vh;
}
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
1
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
2
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
3
In this example for interpolation, hsl color system is being used and hue is being interpolated.
linear-gradient[red, orange, yellow, green, blue];
linear-gradient[red 0%, orange 25%, yellow 50%, green 75%, blue 100%];
4
The box on the top uses , meaning color goes straight from red to blue using the shorter arc on color wheel. The box on the bottom uses , meaning the color goes from red to blue using the longer arc, traversing through greens, yellows, and oranges.
This example uses multi-position color-stops, with adjacent colors having the same color-stop value, creating a striped effect.
Can I use linear gradient with background image?
You can also create repeating gradients with the repeating-linear-gradient[] , repeating-radial-gradient[] , and repeating-conic-gradient[] functions. Gradients can be used anywhere you would use an , such as in backgrounds.
How do I add a gradient overlay to a background image in CSS?
Here's the syntax using the linear-gradient function and an image. Make sure to define the gradient value first to create the color overlay effect, since the first value displays on top. background-image: linear-gradient[color, color], url[image. png];
How do you add a background image with a linear gradient in tailwind CSS?
To give an element a linear gradient background, use one of the bg-gradient-{direction} utilities, in combination with the gradient color stop utilities.