linear-gradient()

The CSS linear-gradient() function creates a color gradient, placing colors along a straight line and smoothly transitioning between them.

.element {
  background-image: linear-gradient(to right in oklab, coral, lightseagreen);
}

Gradients are actually images generated by the browser, so they are mainly used with the background-image property to easily set an element’s background. Although that’s just the most common way for linear-gradient(), as we’ll see.

The linear-gradient() function is defined in the CSS Images Module Level 3 and Level 4 specifications.

Check out the CSS Gradients Guide to learn more about gradient features.

Syntax

linear-gradient([ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list>)

The “formal” syntax is a lot longer. In a nutshell, it says that we can create a gradient that spans in a certain direction or at a specific angle, starting with a color at one location and ending with another color at another location.

Arguments

/* Basic Gradients */
linear-gradient(lightsteelblue, slateblue);
linear-gradient(tomato 50%, hotpink 75%, deeppink);
/* Gradient angles */
linear-gradient(to right bottom, paleturquoise, steelblue);
linear-gradient(45deg, lavender, orchid)
/* Interpolation method */
linear-gradient(in lab, #a0522d, hwb(34 54.9% 17.6%));
linear-gradient(in oklch longer hue, turquoise, #008080);
/* All together */
linear-gradient(to right bottom in oklch longer hue, tomato 50%, hotpink 75%, deeppink);

<angle> | to <side-or-corner>

In linear-gradient(), colors are cast along a straight line whose direction can be specified through an <angle> or position keywords. Initially, the line is at 180 degrees, so colors are cast from top “to bottom“.

• Using an <angle>, we can move the end of the gradient line (where the last defined color is) clockwise by an angle.
• Alternatively, we can write the to keyword followed by a side or corner, using the left, right and top, bottom keywords. They can be used by themselves (to left, to top) to indicate a side or joined (to lef top, to right bottom) for a corner.

<color-stop-list>

This defines which colors are used and their position in the gradient as a comma-separated list. Each color stop has a given <color> followed by two optional <length-percentage> values.

• A single <color> value lets CSS decide where to place the color.
• A <color> <length-percentage> value defines where the given color should be found.
• Lastly, <color> <length-percentage> <length-percentage> defines a starting and ending point for the color to span.

<color-interpolation-method>

This defines the color space used and the path taken between one color to another. To use it, we start with the in keyword followed by one of the many color spaces defined in CSS:

<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
<polar-color-space> = hsl | hwb | lch | oklch

It can be either written at the beginning of linear-gradient() or just before defining the <color-stop-list>.

If the color space uses polar coordinates (hsl, hwb, lch and oklch), then we can also define the path taken by the gradient using the <hue-interpolation-method> syntax.

Basic usage

Linear gradients are probably the most used type of gradients in CSS, and their syntax is a little easier to understand than conic and radial gradients. For example, we can make a simple two-color gradient by defining one color right after the other:

.element {
    background-image: linear-gradient(tomato, slateblue);
}

Here, colors will smoothly transition from top to bottom, which is the linear gradient’s default direction if we don’t provide one:

And we aren’t limited to using just two colors! In fact, we can have as many colors as we want inside a linear-gradient():

.element {
  background-image: linear-gradient(tomato, mediumpurple, slateblue, indigo);
}

As you can see, CSS places the colors equidistantly from each other, but we can pick their positions ourselves by specifying either a <length> or <percentage> after any color. Both options place a color a certain distance away from the gradient’s start, according to its direction, but while <length> works with absolute distances, <percentage>s are relative to the gradient’s box.

The gradient box refers to the area where the gradient is displayed. It’s usually the element’s border box, but it can be modified through the background-size property. Learn more about the CSS Box Model in this article.

.element1 {
  background-image: linear-gradient(lightsalmon 100px, lightcoral 200px);
}
.element2 {
  background-image: linear-gradient(khaki 25%, darkturquoise);
  /* same as */
  background-image: linear-gradient(khaki 25%, darkturquoise 100%);
}

We can also span a color through a certain distance by specifying a second <length> or <percentage>, in which case, the first position defines the color’s start and the second the color’s end.

.element {
  background-image: linear-gradient(lightsalmon 20%, deeppink 50% 55%, lightseagreen 80%);
  /* same as */
  background-image: linear-gradient(lightsalmon 0% 20%, deeppink 50% 55%, lightseagreen 80% 100%);
}

While we will usually stick to positions inside the gradient box, values outside the gradient box (e.g., -100px, -20%, 125%, etc.) are equally valid.

Rotating the gradient line

By default, linear gradients go in a top-to-bottom direction (i.e., to bottom or 180deg), but we can rotate them as much as needed by setting <angle> or by using certain keywords.

Using angles, 0deg points the gradient upwards. From there, we can rotate the gradient clockwise by a given angle:

.element-60 {
  background: linear-gradient(60deg, lightskyblue, midnightblue);
}
.element-150 {
  background: linear-gradient(150deg, hotpink, crimson);
}
.element-195 {
  background: linear-gradient(195deg, darkviolet, aquamarine);
}
.element-315 {
  background: linear-gradient(315deg, moccasin, seagreen);
}

Here, I used degrees, but we might have used any other <angle> unit:

• Degrees (deg, the one I used)
• Gradians (grad)
• Percentages (%)
• Radians (rad)
• Turns (turn)

I also mentioned that we can use certain keywords to alter a linear gradient’s direction:

• top
• bottom
• left
• right

And guess what? We can combine those keywords to form top to four more directions — for a grand total of eight directions!

• top left
• top right
• bottom left
• bottom right

And, naturally, let’s not forget that we specify the direction keyword after the to keyword. Here are several examples using different keyword combinations:

.element-to-top {
  background: linear-gradient(to top, lightskyblue, midnightblue);
}
.element-to-top-bottom-right {
  background: linear-gradient(to bottom right, hotpink, crimson);
}
.element-to-left {
  background: linear-gradient(to left, darkviolet, aquamarine);
}
.element-to-bottom-left {
  background: linear-gradient(to bottom left, moccasin, seagreen);
}

You may have noticed that directions can also be written as angles instead:

Direction	Degrees	Degrees (-)
to top	0/360deg	0/-360deg
to right	90deg	-270deg
to bottom	180deg	-180deg
to left	270deg	-90deg

But corners don’t. Since colors go from one corner to the opposite corner, the specific angle will depend on the gradient’s aspect ratio. To be precise, placing the gradient towards a corner will place the color stop at 50% on the intersection of the two neighboring corners.

So, for example, to top left places the gradient line from the bottom-right corner to the top-left corner, and as a consequence, the color at 50% passes through the top-right and bottom-left corners.

.element {
  background-image: linear-gradient(to top left, slateblue, white, tomato);
}

Hard color stops

While linear-gradient() is used to create, well, gradients that smoothly transition between colors, we can also display gradients as solid colors with no smooth transitions using “hard” color stops. We specify each color position right after the next color, creating no overlap at all between the colors.

Here’s a basic example of a two-color stripe:

.element {
  background-image: linear-gradient(to right, crimson 50%, slateblue 50%);
  /*  same as  */
  background-image: linear-gradient(to right, crimson 0% 50%, slateblue 50% 100%);
}

This opens a world of possibilities. For example, we can create country flags made of one linear-gradient():

We can take it a step further and create an animated loading bar. To do so, we’ll start from a simple <div> element:

<div class="loading"></div>

We’ll give it a bar shape and fill it with a gradient made of four hard color stops:

:root {
  --bar-width: min(500px, 90vw);
}
.loading {
  background-image: linear-gradient(to right, #e76f51 25%, #2a9d8f 25% 50%, #e9c46a 50% 75%, #f4a261 75%);
  height: 15px;
  width: var(--bar-width);
}

Since we are using linear-gradient() as a background-image, then we can move it around by animating the background-position-x property:

@keyframes load {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: var(--bar-width);
  }
}

And what’s left is to apply the animation to the actual element:

.loading {
  /* ... */
  animation: load 2s infinite;
}

They work as masks, too!

So far, we have only used linear-gradient() inside the background-image property. But this won’t always be the case because there are other CSS properties that accept an image.

One of those is masks, which uses images to hide certain parts of an element. In other words, any piece of the element that intersects with a transparent part of the linear-gradient() is hidden away, effectively “masking” the element’s appearance.

In this case, we use the mask-image property. Notice that it supports the linear-gradient() function just as the background-image (and the border shorthand):

.element {
  mask-image: linear-gradient(/*..*/);
}

By default, when a gradient is applied as a mask, transparent colors will hide the element, while solid colors will leave it as is. The specific color doesn’t matter, so you can think of it as if you were assigning the transparency of the image through the gradient.

.element {
  mask-image: linear-gradient(to right, transparent, #000 25% 75%, transparent);
}

This holds whenever mask-mode is set to alpha, which is by default.

Masks are a world on themselves, so if you want to learn more about them, I recommend this detailed explanation Chris Coyier wrote up a while back, which also compares masking to another similar concept, clipping.

For even more on masking, Rachel Andrew has an excellent overview of the mask-image property, and Ahmad Shadeed provides a bunch of real-world examples.

Demo

Specification

The linear-gradient() function is defined in the CSS Images Module Level 3 and Level 4 specifications, which are currently in Editor’s Draft. Lastly, the color interpolation methods are defined in the CSS Color Module Level 4.

Browser support

Both the linear-gradient() function and the interpolation method syntax are supported across all browsers.

More information

Related tricks!

Related