How to set background to gradient color in css3

Setting method: 1. Use the "background:linear-gradient(gradient direction, color 1, color 2,..);" statement; 2. Use the "background:radial-gradient(shape size position, start Color,..,termination color);" statement.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Gradient

CSS3 gradients allow smooth transitions between two or more specified colors. Compared to using gradient images, gradients can reduce download time and bandwidth usage, and look better when zoomed in.

Linear Gradient

Color values gradually transition along an implicit straight line. Generated bylinear-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 show a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).

/* 渐变轴为45度，从蓝色渐变到红色 */ linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);

Syntax

linear-gradient([  | to  ,]?  )

• ## : Use the angle value to specify the direction (or angle) of the gradient. The angle increases clockwise.

  
  

##
• : Describes the starting point position of the gradient line.to top,to bottom,to leftandto rightthese values will be converted to angle0 degrees,180 degrees,270 degreesand90 degrees. The remaining values are converted to an angle clockwise from the top center. The end point of the gradient line is symmetrical to the center of its starting point.
• : Color change list. Supports transparency (rgba(255,0,0,0.1)).

Example: Background-image linear-gradient()

      
  
 
基本线性渐变--自上而下
 
基本线性渐变--45度角
 
  

Radial gradient

radial-gradient()

CSS function creates an image whose color values spread outward from a central point (origin) and gradually transition to other color value.You also need to define at least two color nodes, and you can also specify the center of the gradient (default is at the center point,

center

), shape (default ellipseellipse), Size (defaultfarthest-corner, means to the farthest corner)

Syntax

radial-gradient( [shape size at position] ?  [ ,  ]+ )

shape
• : Ellipse (ellipse, default) or circle (circle)
size
• :
  closest -side
  • , the edge shape of the gradient is tangent to the side of the container closest to the gradient center point (circle) or at least tangent to the vertical and horizontal sides closest to the gradient center point (ellipse).
  closest-corner
  • , the edge shape of the gradient intersects the corner of the container closest to the center point of the gradient.
  farthest-side
  • , In contrast to closest-side, the edge shape is tangent to the side of the container farthest from the center point of the gradient (or the furthest vertical and horizontal sides).
  farthest-corner
  • , the edge shape of the gradient intersects the corner of the container farthest from the center point of the gradient.
• position

  : It can be two specific position offset values (10% 20%), or it can be a key Words (left, right, top, bottom)

Example: background color radial gradient--background-image radial-gradient()

Repeat Gradient

Repeat the gradient pattern multiple times until it is enough to fill the specified element. Produced by the

repeating-linear-gradient()

andrepeating-radial-gradient()functions.The parameters of the repeat function are the same as above, except that it will be repeated based on multiples of the gradient length (the distance between the last color scale and the first one).

（Learning video sharing:

css video tutorial

）

The above is the detailed content of How to set background to gradient color in css3. For more information, please follow other related articles on the PHP Chinese website!