CSS3 Gradients


image.png


CSS3 gradients allow you to display smooth transitions between two or more specified colors.

Previously, you had to use images to achieve these effects. However, by using CSS3 gradients, you can reduce download time and bandwidth usage. Also, elements with gradient effects look better when zoomed in because gradients are generated by the browser.

CSS3 defines two types of gradients:

  • Linear Gradients - Down/Up/Left/Right/Diagonal

  • Radial Gradients - Defined by their centers

Linear gradient related properties: background-image .


Browser support

The numbers in the table designate the first browser version that fully supports the property.

Propertyimage.pngimage.pngimage.pngimage.pngimage.png
background-image1.04.01.01.03.5

Note: IE8 and earlier versions of IE browsers do not support this property.


CSS3 Linear Gradient

In order to create a linear gradient, you must define at least two color nodes. The color node is the color you want to have a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).

Examples of linear gradients:

Linear Gradient

Grammar

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - top to bottom (by default)

The example below demonstrates a linear gradient from the top. The starting point is red and slowly transitions to blue:

Example

Linear gradient from top to bottom:

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

Try It! 

Linear Gradient - Left to Right

The example below demonstrates a linear gradient starting from the left. The starting point is red and slowly transitions to yellow:

Example

Linear gradient from left to right:

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

Try It! 

Linear Gradient - Diagonal

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

The example below demonstrates a linear gradient starting from the upper left corner (to the lower right corner). The starting point is red and slowly transitions to yellow:

Example

Linear gradient from top left to bottom right:

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

Try It! 


Use angle

If you want more control over the direction of the gradient, you can define an angle instead of a predefined direction (to bottom, to top, to right, to left, to bottom right, etc.).

Grammar

background-image: linear-gradient(angle, color-stop1, color-stop2);

Angle is the angle between the horizontal line and the gradient line, calculated counter-clockwise. In other words, 0deg will create a bottom-to-top gradient, and 90deg will create a left-to-right gradient.

However, be aware that many browsers (Chrome, Safari, firefox, etc.) use the old standard, ie 0deg will create a left-to-right gradient, and 90deg will create a bottom-to-top gradient. Conversion formula 90 - x = y where x is the standard angle and y is the non-standard angle.

The following example demonstrates how to use angles on linear gradients:

Example

Linear gradient with specified angle:

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

Try It! 


Use multiple color nodes

The following example demonstrates how to set up multiple color nodes:

Example

Linear gradient from top to bottom with multiple color nodes:

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Try It! 

The following example demonstrates how to create a linear gradient with rainbow colors and text:

Example

#grad {
  /* Standard syntax */
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Try It! 


Use transparency

CSS3 gradients also support transparency, which can be used to create faded effects.

To add transparency, we use the rgba() function to define color nodes. The last parameter in the rgba() function, which can be a value from 0 to 1, defines the transparency of the color: 0 is fully transparent, 1 is fully opaque.

The example below demonstrates a linear gradient starting from the left. The starting point is fully transparent and slowly transitions to fully opaque red:

Example

Linear gradient from left to right with transparency:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Try It! 


Repeating Linear Gradient

The repeating-linear-gradient() function is used to repeat linear gradients:

Example

A repeating linear gradient:

#grad {
  /* Standard syntax */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Try It! 


CSS3 radial gradient

A radial gradient is defined by its center.

In order to create a radial gradient, you must also define at least two color nodes. The color node is the color you want to have a smooth transition. At the same time, you can also specify the center, shape (circle or ellipse), and size of the gradient. By default, the center of the gradient is center (representing at the center point), the shape of the gradient is ellipse (representing an ellipse), and the size of the gradient is farthest-corner (representing the farthest corner).

Example of radial gradient:

Radial gradient

Grammar

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Radial Gradient - Color nodes are evenly distributed (by default)

Example

Radial gradient with evenly distributed color nodes:

#grad {
  background-image: radial-gradient(red, yellow, green);
}

 Try It! 

Radial Gradient - uneven distribution of color nodes

Example

Radial gradient with uneven distribution of color nodes:

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Try It! 


Set shape

The shape parameter defines the shape. It can be the value circle or ellipse. where circle represents a circle and ellipse represents an ellipse. The default value is ellipse.

Example

Radial gradient with the shape of a circle:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

 Try It! 


Use of Different Size Keywords

The size parameter defines the size of the gradient. It can be the following four values:

  • closest-side

  • farthest-side

  • closest-corner

  • farthest-corner

Example

Radial Gradient with Different Size Size Keywords:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
 
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Try It! 


Repeating Radial Gradient

The repeating-radial-gradient() function is used to repeat radial gradients:

Example

A repeating radial gradient:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Try It!