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
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.
The following are some examples of angle values:
linear-gradient(0deg, #FFDAB9, #7FFFD4); linear-gradient(90deg, #FFDAB9, #7FFFD4); linear-gradient(45deg, #FFDAB9, #7FFFD4);
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:
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);
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.
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!