How to realize Linear gradient by CSS3
Today, I would like to share with you the relevant knowledge of how to achieve linear gradient in CSS3. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.
CSS3 gradient (gradients) allows you to show a smooth transition between two or more specified colors.
In the past, you had to use images to achieve these effects. However, by using CSS3 gradients (gradients), you can reduce download time and broadband usage. In addition, the elements of the gradient look better when zoomed in, because the gradient is generated by the browser.
CSS3 defines two types of gradients:
Linear gradient (LinearGradients)-down / up / left / right / diagonal
Radial gradient (RadialGradients)-defined by their center
CSS3 linear gradient
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 set a starting point and a direction (or an angle).
Grammar
Background-image:linear-gradient (direction,color-stop1,color-stop2,...)
Linear gradient-from top to bottom (default)
The following example demonstrates a linear gradient from the top. The starting point is red and slowly transition to blue:
Example
A linear gradient from top to bottom:
# grad {
Background-image: linear-gradient (# e66465, # 9198e5)
}
Linear gradient-from left to right
The following example demonstrates a linear gradient starting from the left. The starting point is red and slowly transition to yellow:
Example
A linear gradient from left to right:
# grad {
Height: 200px
Background-image: linear-gradient (to right, red, yellow)
}
Linear gradient-diagonal
You can make a diagonal gradient by specifying horizontal and vertical starting positions.
The following example demonstrates a linear gradient starting from the upper left corner (to the lower right corner). The starting point is red and slowly transition to yellow:
Linear gradient from the upper left corner to the lower right corner:
# grad {
Height: 200px
Background-image: linear-gradient (to bottom right, red, yellow)
}
These are all the contents of the article "how to achieve linear gradient in CSS3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
