preface

The reason for writing this blog post is for two reasons

1. Many online introductions to Linear-gradient () are too short, so short that if you run into problems and can’t get any useful information out of it, it’s a good article

2, this thing is very useful in many places!

The body of the

The linear-gradient() function is used to create an image that represents a linear gradient of two or more colors. The result belongs to the

data type, which is a special
data type.

Linear-gradient belongs to the gradient data type, which is a sub-data type of image. Therefore, gradient can only be used where the image type can be used. (In this article, you can interpret it as linear-gradient, which works with labels containing imgae, but not with the rest).

demo1

  background-image: linear-gradient(to right,red, orange, yellow, green, blue);
Copy the code

linear-gradient
The direction of
color
color
color

Of course we can set a property for the color called color-stop, which is where the color stops.

demo2

background-image: linear-gradient(to right,red 0%, orange 25%, yellow 50%, green 75%, blue 100%); // This code has the same effect as the above code.Copy the code

demo3

To demonstrate and to show the difference, we’ll use two colors

demo3

Background-image: linear gradient(to right, red, yellow); Background-image: linear gradient(to right, red 0, yellow 100%);Copy the code

Results show

Now let’s debug the percentages in the next line

            background-image: linear-gradient(to right, red 50%, yellow);
Copy the code

As soon as we see that the green circle is red, that is 50%, then we have a red to yellow gradient between 50% and 100%. (Sure enough, the gradient effect is a little hard to explain). As to why this is the case, listen to my following description:

Computing rules for gradients

First, the linear gradient is defined by the axis. The direction to right that we use with Linear Graddient defines the direction of the axis, from left to right. The MDN web documentation is described as follows

Linear gradients are defined by an axis (gradient line) on which each point has two or more colors, and each point on the axis has an independent color. To create a smooth gradient, the linear-gradient() function builds a series of shading lines that are perpendicular to the gradient line. The color of each shading line depends on the color point on the gradient line that intersects it vertically. The gradient line is defined by the center point and an Angle of the container containing the gradient. The color value on the gradient line is defined by different points, including the starting point, the ending point, and an optional intermediate point in between (there can be multiple intermediate points). The starting point is the point on the gradient line that represents the starting color value. The starting point is defined by the intersection between the gradient line and the vertical line passing through the container's vertices. (The vertical line is in the same quadrant as the gradient line.) Again, the end point is the point on the gradient line that represents the final color value. The end point is also defined by the intersection between the gradient line and the vertical line originating from the nearest vertex. However, it is easier to define the end point from the symmetric point of the starting point because the end point is the reflection of the starting point from the center of the container.Copy the code

In Demo3 you can imagine that there is a horizontal line from left to right that is no longer horizontal, and there are more than n lines that are perpendicular to this line. These lines are densely arranged to form the rectangular gradient that you see. So how do we define the colors of these lines? It looks to me like this

Start point color value + end color value / 2Copy the code

Between two colors, such as red and yellow mentioned above, calculate the color value of the middle 50% by the color value of 0 and 100%, then calculate the color value of 25%, 75% by 0%, 50%, 100%, and so on. For more than one color, calculate the gradients between the ends of two adjacent colors

This is my understanding, if you feel inappropriate, welcome to correct, I accept ha

Of course we can specify the midpoint of the color

            background-image: linear-gradient(to right, red 0%, 30%, yellow 100%);

Copy the code

This moves the intermediate value of the transition to 30%

Linear – use of gradient

This is probably telling you something about Linear-gradient, so let’s see what it does

Let’s go to code demo4

        .mode {
            width: 100px;
            height: 100px;

            margin: 50px auto;

            background-color: yellowgreen;

            background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%,  transparent 75%, transparent 100%);
        }
Copy the code

linear-gradient 

If two or more colors terminate at the same location, the transition between the first and last color declared at that location will be a rigid line.Copy the code

When rGBA (255, 255, 255,.3) 25% and transparent 25%, I set the end value to 25%. Transparent will appear in this position. If there are multiple colors with the same end point, then at this split position, It’s the color value of the last color that has the same end point.

You want to know what this can be used for? Let’s change the width and height of demo4 and set size

 width: 200px;
            height: 20px;

            margin: 50px auto;

            background-color: yellowgreen;

            background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%,  transparent 75%, transparent 100%);

            background-size: 20px 20px;
Copy the code

In addition, the Linear-gradient can be set multiple times. For example, let’s make a copper coin

demo5


width: 100px;
height: 100px;
    
border-radius: 50%;

background-color: #fff;

background-image: linear-gradient(to right, yellow 25%, transparent 25%, transparent 75%,  yellow 75%),
                  linear-gradient(to top, yellow 25%, transparent 25%, transparent 75%,  yellow 75%);

Copy the code

conclusion

It’s up to you to use your imagination.