CSS linear-gradient() Function

The linear-gradient function creates a color gradient.

This function is used by the background and background-image properties.

Example

#

A linear-gradient function running from top to bottom.

<style>
  .linear {
    height: 150px;
    background-image: linear-gradient(orangered, purple);
  }
</style>

<div class="linear"></div>

Using linear-gradient

Two or more color stops must be specified to create a linear gradient.

Optionally, the gradient's direction can also be specified.

Syntax

linear-gradient(direction, 
       color-stop-1, color-stop-2, ..., color-stop-n);

Values

#

Value Description
direction Optional. Specifies the starting point and direction of the linear gradient.
Default is top-to-bottom. Valid values include: to right, to top, to left, and to bottom. These are equivalent to 90deg, 180deg, 270deg, and 0deg. Custom directions can be specified as 20deg, 165deg, etc.
color-stop-1,
color-stop-2,
...,
color-stop-n
Color stops to create the gradient. Each stop is a color value with optional stop position. Stop positions are expressed as a length value or a percentage.

More Examples

A linear-gradient with three color stops from left to right.

<style>
  .linear-right {
    background-image: linear-gradient(to right, 
                     orangered 10%, yellow 70%, purple 80%);
    height: 150px;
  }
</style>

<div class="linear-right"></div>

A linear-gradient with two color stops and a specified direction.

<style>
  .linear-deg {
    background-image: linear-gradient(150deg, orangered, yellow);
    height: 150px;
  }
</style>

<div class="linear-deg"></div>

Browser support

This table shows when linear-gradient support started for each browser.

Chrome
26.0 Mar 2013
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
12.1 Nov 2012
Safari
6.1 Jun 2013

You may also like

Guides