A linear gradient property creates a smooth transition between two or more colors in a straight line. By default, the gradient goes from the top of the element to the bottom.

We can control the direction of a gradient by using keywords that point to one of the sides of the corners; which then becomes the ending point. Alternatively, you can specify the angle at which the gradient should be drawn.

Linear gradients

To create a linear gradient, you use the linear-gradient() function, which takes the following comma separated arguments:

  • The angle or direction of the gradient (optional)
  • A comma-separated list of two or more color stops.

Syntax:

selector {

     background: linear-gradient(direction [keyword | angle], color-stop1, color-stop2, ...);

}

Values:

The linear-gradient() may have one of the following values:

  • angle - An angle for the direction of the gradient (e.g., 90deg); you can use negative values or values greater than 360 degrees.
  • side-or-corner - Defines the starting point of the gradient (if an angle isn’t used) and is specified by up to two keywords from the four available (top, bottom, left, right). The default value is top left and if only one value is declared the second value defaults to "center."
  • color-stop - In its simplest form, a color value. Optional stop position(s) along the gradient can be added as a percentage of value between 0% and 100%. 

Example

Example of how to set a basic gradient for div element:

Linear gradient: top to bottom

NOTE: This is the default value for linear gradients.

Example

Example of top-to-bottom linear gradient:

Linear gradient: left to right

Example

Example of left-to-right linear gradient:

Linear gradient - diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

Example

Example of diagonal linear gradient:

Setting the Angle of the Gradient Line

You can also use an angle instead of keywords to set the direction of the gradient line. Specifying the angle in degrees with the deg unit of measurement is simple, but there are two complicating factors:

  1. In all browsers, most angles produce starting and ending points outside the gradient box.
  2. Browsers that require a browser-specific prefix with linear-gradient() use a different coordinate system from the final CSS specification.

The angle is calculated from the center of the gradient box, and the gradient line stretches in both directions. You can use negative values for a counter-clockwise angle, for instance -45deg has the same meaning as 315deg.

Example

Example of angles in linear gradient:

Repeating linear-gradients with repeating-linear-gradient() function

Linear gradients may be used in a repeated mode. That is done with the repeating-linear-gradient() function.

Syntax:

selector {

       background-image: repeating-linear-gradient(circle at 50% 100%, #FFEB79, #D9CC3C 5%);

}

Example

Example of repeated linear gradient:

Multiple color stops

The linear gradients may be set up to have multiple color stops as well, as shown in the example below.

Example

Example of multiple color stops in linear gradients:

Transparency in linear gradients

Transparency in gradients is achieved in same way as with other transparent properties, such text shadows, box shadows, etc…, and that is to select color with rgba() function where ‘a’ stands for alpha opacity. The values ‘a’ in rgba() function may be any number between 0 and1, with 0 representing 0% opacity (fully transparent) and 1 representing 100% opacity (no transparency). To use 50 % opacity, we would make the number be 0.5.

Example

Example of transparency in linear gradients:

 

›› go to examples ››