How to change the Angle of gradient in css3

This article mainly explains "how to change the angle in css3". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to change the angle in css3.

In css3, you can use the "linear-gradient" function to change the angle of the gradient, which is used to create a picture that represents a linear gradient of two or more colors. The first parameter is used to set the angle or direction of the gradient. The syntax is "Color attribute: linear-gradient (gradient angle, color.)".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to change the Angle of gradient in css3

The syntax for linear-gradient linear gradients is:

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

The main parameters are:

Direction specifies the direction (or angle) of the gradient with an angle value.

Color-stop1, color-stop2,... Lets you specify the start and end color of the gradient.

Examples are as follows:

123 # grad1 {height: 30px; background-color: red; / * display * / background-image: linear-gradient (0deg, red, yellow) when the browser does not support it;} # grad2 {height: 30px; background-color: red; / * display * / background-image when the browser does not support it: linear-gradient (90deg, red, yellow);} # grad3 {height: 30px; background-color: red / * display * / background-image when the browser does not support it * / background-image: linear-gradient (180deg, red, yellow);} # grad4 {height: 30px; background-color: red; / * display * / background-image: linear-gradient (- 90deg, red, yellow) when the browser does not support it;} linear gradient-use different angles 0deg

90deg

180deg

-90deg

Note: gradients are not supported in Internet Explorer 9 and previous versions.

Output result:

Thank you for your reading, the above is the content of "how to change the angle in css3". After the study of this article, I believe you have a deeper understanding of how to change the angle in css3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!