WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Gradients


Gradient Background

CSS3 gradients allow you to show a smooth transition 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. In addition, the elements of the gradient effect look better when zoomed in, because the gradient is generated by the browser.

CSS3 defines two types of gradients:

  • Linear Gradients-down /up /left /right /diagonal
  • Radial Gradients-defined by their centers

Browser Support

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

Property
linear-gradient 26.0
10.0 - webkit-
12.0 10.0 16.0
3.6 - moz-
6.1
5.1 - webkit-
12.1
11.1 - o-
radial-gradient 26.0
10.0 - webkit-
12.0 10.0 16.0
3.6 - moz-
6.1
5.1 - webkit-
12.1
11.6 - o-
repeating-linear-gradient 26.0
10.0 - webkit-
12.0 10.0 16.0
3.6 - moz-
6.1
5.1 - webkit-
12.1
11.1 - o-
repeating-outspread gradient 26.0
10.0 - webkit-
12.0 10.0 16.0
3.6 - moz-
6.1
5.1 - webkit-
12.1
11.6 - o-
Note: IE8 and earlier IE browsers do not support this property.

CSS3 Linear Gradients

To create a linear gradient, you must define at least two color nodes. Color nodes are the colors you want to have a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).

An example of a linear gradient:

Syntax

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

Linear gradient-top to bottom (by default)

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

Example

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

Linear Gradient - Left to Right

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

Example

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

Linear Gradient - Diagonal

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

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

Example

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

Using Angles

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.).

Syntax

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

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

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

The following example demonstrates how to use angles on a linear gradient:

Example

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

Using Multiple Color Stops

The following example shows how to set multiple color nodes:

Example

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

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

Slope Background

Example

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

Using Transparency

CSS3 gradients also support transparency, which can be used to create a fade effect.

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

The following example demonstrates a linear gradient from the left. The starting point is completely transparent, slowly transitioning to completely opaque red:

Example

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

Repeating a linear-gradient

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

Example

A repeat linear-gradient:

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

CSS3 Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient, you must also define at least two color nodes. Color nodes are the colors you want to have a smooth transition. You can also specify the center, shape (round or oval), and size of the gradient. By default, the center of the gradient is center (represented at the center point), the shape of the gradient is ellipse (represents an oval), and the size of the gradient is farthest-corner (represented to the farthest corner).

Syntax

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

By default, shape is oval, measure is most distant corner, and position is center.

Radial Gradient - Evenly Spaced Color Stops (this is default)

Example

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

Radial gradient-uneven color nodes

Radial gradient with unevenly distributed color nodes:

Example

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

Set Shape

The shape parameter defines the shape. It can be the value circle or ellipse. Among them, circle represents a circle, and ellipse represents an oval. The default is ellipse.:

Example

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

Use of keywords of different sizes

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

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Example

Radial gradient with keywords of different sizes:

#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 yourself »

Repeating radial gradient

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

Example

A repeat outspread gradient:

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