Linear-gradient linear Gradient

Background:linear-gradient (180deg, Sliver 20%, Skyblue 80%, Gray 100%);

180deg is the angle of the linear gradient, the horizontal direction, or, if it is 90deg, the vertical direction.

The silver 20% is the topmost color and the position of the color, which can be negative, as

Linear-gradient (180deg, silver-7%, Pink 80%, Skyblue 127%);

The effect is:

The second parameter: to-left, to-top, to-right, to-left-bottom, to-left-top, to-right-bottom, to-right top.

Background:linear-gradient (to left, silver 10%, Pink 50%, Skyblue 100%);

The direction of the gradient is toward the left: so from right to left, Silver pink skyblue. (If you do not write a percentage of the position, the color will be evenly distributed filled with this box).

Special:

The default is to ramp down from top to bottom. But if we don't want a gradient, we need the color bar. The trick is to not leave a gap between the two colors, because a gradient transition will occur when you leave a gap.

So we can set each account to 50%. This 50% represents the color position. It can also be a unit of length.

Background:linear-gradient (90deg,silver 0, silver 33%,pink 0, Pink 67%,skyblue 0, skyblue 100%);

Linear-gradient linear Gradient