8.7.1. Browser support ¶

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

Note: this attribute is not supported by IE8 and earlier IE browsers.

8.7.2. CSS3 linear gradient ¶

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

An example of a linear gradient:

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

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

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

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

8.7.3. Use Angl ¶

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

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

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

8.7.4. Use multiple color nodes ¶

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

Example

A linear gradient from top to bottom with multiple color nodes:

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

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

Example

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

8.7.5. Use transparency ¶

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

To add transparency, we use the rgba() function to define the color node. 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 starting from the left.The starting point is completely transparent, slowly transitioning to a completely opaque red:

Example

A 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));
}

8.7.6. Repetitive linear gradient ¶

repeating-linear-gradient() function is used for repeated linear gradients:

Example

A repetitive linear gradient:

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

8.7.7. CSS3 radial gradient ¶

The 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 show a smooth transition. At the same time, you can also specify the center, shape (circleor oval) and size of the gradient. By default, the center of the gradient is center (indicates at the center point), the shape of the gradient is``ellipse`` (represents an oval), the size of the gradient is farthest-orner means to the farthest corner.

An example of a radial gradient:

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

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

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

8.7.8. Set shape ¶

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

Example

A radial gradient with a circular shape:

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

8.7.9. The use of keywords of different sizes ¶

size parameter defines the size of the gradient. It can be the followingfour values:

• Closest-side

• Farthest-side

• Closest-corner

• Farthest-corner

Example

Radial gradient with different 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);
}

8.7.10. Repeated radial gradient ¶

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

Example

A repeated radial gradient:

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