How to set gradient color in css

Methods for setting gradient colors in CSS include: using linear-gradient() to create linear gradients. Use radial-gradient() to create a radial gradient. Use repeating-linear-gradient() and repeating-radial-gradient() to create repeating gradients.

How to use CSS to set gradient colors

Introduction
Gradient colors on web pages Widely used in design, it can be used to create eye-catching visual effects. CSS provides a variety of ways to set gradient colors.

Method 1: Use linear-gradient()
This is the simplest way to create a linear gradient. The syntax is as follows:

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

• direction: The direction of the gradient (for example, to bottom)
• color-stopN:The color stopping point in the gradient (specified by its position and color)

Example:

linear-gradient(to bottom, #ff0000, #00ff00);

Method 2: Using radial-gradient()
This method creates a radial gradient that radiates outward from a center point. The syntax is as follows:

radial-gradient(shape, size, start-color, end-color);

• shape: The shape of the gradient (for example, circle or ellipse)
• size: The size of the gradient (for example, 100px)
• start-color: Starting color of the center of the gradient
• end-color: End color of the gradient edge

Example:

radial-gradient(circle, 100px, #0000ff, #ffffff);

Method 3: Use repeating- linear-gradient() and repeating-radial-gradient()
These methods create repeating gradients. The syntax is similar to the corresponding linear-gradient() and radial-gradient(), but with the added repeating- prefix.

Other properties

• background-position: Specify the position of the gradient
• background-size: Specify the size of the gradient
• background-clip: Specify the clipping area of ​​the gradient

Example:

background: linear-gradient(to bottom, red, yellow);
background-position: left top;
background-size: 100% 50%;
background-clip: content-box;

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