CSS3 gradient

wang xiao bo 's photo
wang xiao bo
·

3 min read

CSS3 gradients allow you to display 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, elements with gradient effects 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 Direction -Radial Gradients-defined by their centers

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 present a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).

#grad1 {
    height: 200px;
    background-color: red; /* Display when the browser does not support */
    background-image: linear-gradient(#e66465, #9198e5);
}

Linear gradient-from left to right The following example demonstrates a linear gradient starting from the left. The starting point is red, and it slowly transitions to yellow:

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

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 it slowly transitions to yellow:

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

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

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

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

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

Use transparency (transparent) CSS3 gradients also support transparency (transparent), which can be used to create a weakening 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, 1 means completely opaque. The following example demonstrates a linear gradient starting from the left. The starting point is completely transparent, slowly transitioning to completely opaque red:

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

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

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

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

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

Radial gradient with uneven distribution of color nodes:

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

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 ellipse. The default value is ellipse.

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

Use of keywords of different sizes The size parameter defines the size of the gradient. It can be the following four values:

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

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

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