Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.