Home >Web Front-end >Front-end Q&A >Detailed explanation of how to write css gradient color
Detailed explanation of how to write css gradient color
- PHPzOriginal
- 2023-04-06 12:49:592350browse
CSS gradient color is a commonly used technology in web design. It can make the color transition of the page more natural, and can also well enhance the beauty and expressiveness of the page. Let me introduce you to how to write CSS gradient colors.
1. Linear Gradient
- Defining the Gradient Direction
Before defining a linear gradient, you need to consider the direction of the gradient. By default, the linear gradient is from top to bottom, which is the vertical direction, and this direction can be changed by setting the angle value.
- If you want a gradient in the horizontal direction, you can set the corresponding angle value, for example, 0 degrees means from left to right, 180 degrees means from right to left, etc.
- If you want a diagonal gradient, you can set an angle value with degrees.
The following are some examples of angle values:
linear-gradient(0deg, #FFDAB9, #7FFFD4); linear-gradient(90deg, #FFDAB9, #7FFFD4); linear-gradient(45deg, #FFDAB9, #7FFFD4);
- Define the gradient color
To define the color of the linear gradient, you need to use linear-gradient()Function.
background: linear-gradient(to right, #FFDAB9, #7FFFD4);
to right means a horizontal gradient from left to right, followed by the color you want to gradient. If you want to set a gradient of multiple colors for an element, you can write it like this:
background: linear-gradient(to right, #FFDAB9, #7FFFD4, #FFDAB9);
2. Radial gradient
Radial gradient is somewhat different from linear gradient, it will start from the middle Spread outward until the entire element is covered. Defining a radial gradient requires configuring the following elements:
- Shape of the gradient
The radial gradient can be set to a circle or an ellipse to enable different shapes .
background: radial-gradient(circle, #FFDAB9, #7FFFD4); background: radial-gradient(ellipse, #FFDAB9, #7FFFD4);
- Start and end points of the gradient
A radial gradient has a light source, and the colors are diffused from a circle of varying radii that the light source starts radiating from. Therefore, we need to define the start and end points of the gradient.
background: radial-gradient(at center, #FFDAB9, #7FFFD4);
Use the at center keyword to set the light source at the center of the element.
background: radial-gradient(50% 50%, #FFDAB9, #7FFFD4);
Using coordinate values to define the position of the light source can achieve more customized needs.
- Control gradient color
Similar to linear gradient, radial gradient also requires specifying the gradient color.
background: radial-gradient(at center, #FFDAB9, #7FFFD4);
The above is how to write CSS gradient color, which can be used flexibly according to needs.
The above is the detailed content of Detailed explanation of how to write css gradient color. For more information, please follow other related articles on the PHP Chinese website!