CSS Linear Gradient

Perhaps the most common type of gradient we see in web design is the linear-gradient(). It's called "linear" because the colors flow from left-to-right, top-to-bottom, or at any angle you chose in a single direction.

Linear gradients were introduced in CSS Level 3 as part of the CSS Image Values and Replaced Content specification. It might sound funny to catalog this feature with images, but gradients are basically a way to generate an image natively in code without the use of image editing software. As such, gradients are applied to background properties, which we'll get into right now.

Syntax

The syntax is pretty straightforward and is declared on either the background or background-image property in CSS. It basically reads like this in plain English:

Create a background image that is a linear gradient that moves [to this direction or at this angle] and starts with [one color] and ends with [another color].

The official syntax looks more like this:

linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

Usage

At its most basic, that translates to this in practice:

.gradient {
  background-image:
    linear-gradient(
      red, #f06d06
    );
}

We did not declare the <angle> in the example above. CSS will assume from top in that scenario, where red is the starting color and transitions into the next color:

See the Pen BdhbD by Chris Coyier (@chriscoyier) on CodePen.

We could have written the same thing two other ways:

/* Explicitly declare the direction */
background-image: linear-gradient(to bottom, red, #f06d06);

/* Explicitly declare the angle, in degrees */
background-image: linear-gradient(72deg, red, #f06d06);

Changing Directions

To make it left-to-right, you pass an additional parameter at the beginning of the linear-gradient() function starting with the word to which indicates the direction:

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, #f06d06
    );
}

See the Pen zFoxn by Chris Coyier (@chriscoyier) on CodePen.

This to syntax works for corners as well. For instance if you wanted the axis of the gradient to start at the bottom left corner and go to the top right corner, you could say to top right:

.gradient {
  background-image:
    linear-gradient(
      to top right, 
      red, #f06d06
    );
}

See the Pen cruJe by Chris Coyier (@chriscoyier) on CodePen.

If that box was square, the angle of that gradient would have been 45deg, but since it's not, it isn't. If you wanted to make sure it was 45deg, you could declare the exact angle, only dropping to from the syntax:

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      red, #f06d06
    );
}

Chaining Multiple Colors

You aren't limited to just two colors either. In fact, you can have as many comma-separated colors as you want. Here's four:

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

See the Pen niIjA by Chris Coyier (@chriscoyier) on CodePen.

...and note that function accepts all forms of color syntax, including named, hex, RGB and HSL.

You can also declare where you want any particular color to start. These starting points are called color-stops. Say you want yellow to take up the majority of the space, but red only a little bit in the beginning. You could make the yellow color-stop pretty early. In the following example, red runs until 10% and then yellow takes from there:

.gradient {
  background-image:
    linear-gradient(
      to right,
      red,
      yellow 10%
    );
}

See the Pen xnqfj by Chris Coyier (@chriscoyier) on CodePen.

Hard Color Stops

We tend to think of gradients as fading colors, but if you have two color stops that are the same, you can make a solid color instantly change to another solid color. This can be useful for declaring a full-height background that simulates columns or stripes:

.columns-bg {
  background-image:
    linear-gradient(
      to right, 
      #fffdc2,
      #fffdc2 15%,
      #d7f0a2 15%,
      #d7f0a2 85%,
      #fffdc2 85%
    );
}

See the Pen csgoD by Chris Coyier (@chriscoyier) on CodePen.

Browser Support

Browser support for linear gradients is solid. There was a point in time where all the major browsers supported gradients with the use of a vendor prefix. If your browser support needs to go super deep, then you might consider using Autoprefixer or a similar tool that handles vendor prefixing for you rather than having to manage those yourself.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
10*11.6*3.6*10125.1*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
5.0-5.1*12*No4*6156

Legacy Internet Explorer Filters

While Internet Explorer (IE) versions 6-9 don't support the CSS gradient syntax, do offer a programmatic way to do background gradients

/* "Invalid", but works in 6-8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

/* Valid, works in 8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

There are some considerations here on deciding to use this or not:

  1. filter is generally considered a bad practice for performance
  2. background-image overrides filter, so if you need to use that for a fallback, then filters are out. If a solid color is an acceptable fallback (background-color), then filter is a possibility.

Even though filters only work with hex values, you can still get alpha transparency by prefacing the hex value with the amount of transparency from 00 (0%) to FF (100%). Example:

rgba(92,47,90,1) == #FF5C2F5A
rgba(92,47,90,0) == #005C2F5A

Wrapping Up

Phew, that was a lot of information for a seemingly simple concept! Linear gradients, at their core, are how colors transition from one into another in a single direction. However, the syntax provides ways for us to manipulate how and where those transitions happen that allow us to create some interesting patterns.

Additional Resources

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag