How to achieve color gradient effect in css3

How to achieve color gradient effect in css3: You can use linear-gradient function and radial-gradient function to achieve linear gradient effect and radial gradient effect respectively, such as [linear-gradient(yellow, green)].

There are two types of css3 gradients: css3 linear gradient and css3 radial gradient.

(Learning video sharing:css video tutorial)

1. Linear gradient color gradient

Function:

linear-gradient () function is used to create an image that represents a linear gradient of two or more colors.

Syntax:

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

Value:

• direction Use the angle value to specify the direction (or angle) of the gradient.

• color-stop1, color-stop2,... Used to specify the starting and ending colors of the gradient.

Example:

      
  
线性渐变 - 从上到下
 
  

2. Radial gradient

function;

radial-gradient() function uses radial gradient Create "image".

The radial gradient is defined by the center point.

In order to create a radial gradient you must set two stop colors.

Syntax:

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

Value:

1. shape Determine the type of circle

• ellipse ( Default): Specifies an elliptical radial gradient.

• circle: Specify the radial gradient of the circle

##2, size Define the size of the gradient, possible values:

• farthest-corner (default): Specify the radius length of the radial gradient from the center of the circle to the corner farthest from the center

• closest-side: Specify the radial gradient The radius length is from the center of the circle to the side closest to the center

• closest-corner: Specifies the radius length of the radial gradient from the center of the circle to the corner closest to the center

• farthest-side: Specify the radius length of the radial gradient from the center of the circle to the side farthest from the center of the circle

3. Position defines the position of the gradient. Possible values:

• center (default): Set the ordinate value in the center of the radial gradient circle.

• top: Set the top to be the ordinate value of the center of the radial gradient circle.

• bottom: Set the bottom to the ordinate value of the center of the radial gradient circle.

4. start-color, ..., last-color is used to specify the starting and ending colors of the gradient.

Example:

      
  
径向渐变
 
  

Related recommendations:

CSS tutorial

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