CSS3 linear gradient

Time:2021-9-16

CSS3 linear gradient

Definition and usage

The linear gradient() function creates an “image” of a linear gradient.

To create a linear gradient, you need to set a starting point and a direction (specified as an angle). You also define the termination color. The stop color is the transition you want gecko to smooth, and you must specify at least two. Of course, you can also specify more colors to create more complex gradient effects.

grammar

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> ) 

<angle>

Specify the direction (or angle) of the ramp with an angle value. The angle increases clockwise. 0 degrees means the gradient direction is from bottom to top, and 90 degrees means the gradient is from left to right. The angle increases clockwise. Unit isdeg

<side-or-corner>
The direction of the gradient is defined by the keyword. There are two keywords, one for horizontal position (left or right) and one for vertical position (top or bottom). The order of keywords has no effect, and they are optional.

<linear-color-stop>

By one<color>Value, followed by an optional end position (which can be a percentage value or a value along the gradient axis)<lenght>)。 The color rendering of CSS gradient adopts the same rules as SVG.

<color-hint>

A color transition point is an interpolation hint that defines how gradients occur between adjacent colors. Length defines which point between two colors to stop the gradient, and the color should reach the midpoint of the color transition. If omitted, the midpoint of the color conversion is the midpoint between the two color stops.

example

Basic linear gradient

To create the most basic gradient type, you only need to specify two colors. These are called color codes. Specify at least two color codes, or any number.

 .container>div:nth-child(1){
            background: linear-gradient(red , yellow);
        }

effect

CSS3 linear gradient

Gradient tips

By default, the gradient transitions smoothly from one color to another. You can set a value to move the center point of the gradient to the specified position. In the following example, we set the center point of the gradient from 50% to 10%.

.container>div:nth-child(2){
            background: linear-gradient( red , 10%,yellow);
        }

effect

CSS3 linear gradient

Change gradient direction

By default, the direction of the linear gradient is from top to bottom. You can specify a value to change the direction of the gradient.

.container>div:nth-child(4){
            /*
                * background: linear-gradient(side-or-corner, color-stop1, color-stop2, ...);
                *Side or corner - defines the direction of the baseline of the linear gradient by keyword
                *Color stop indicates the color and position of the linear gradient
            */
            background: linear-gradient(to right, red, yellow);
        }

effect

CSS3 linear gradient

Set gradient angle

If you want to control the direction of the gradient more accurately, you can set a specific angle for the gradient.

.container>div:nth-child(4){
            /*
                * background: linear-gradient(angle, color-stop1, color-stop2, ...);
                *Angle - represents the angle of the datum line of the linear gradient, in deg
                *Color stop indicates the color and position of the linear gradient
            */
            background: linear-gradient(0deg, red , yellow);
        }

effect

CSS3 linear gradient

When using angles,0degRepresents that the gradient direction is from bottom to top,90degRepresents that the gradient direction is from left to right, and such positive angles are clockwise. A negative angle means counterclockwise.

CSS3 linear gradient

Diagonal gradient

You can even set the gradient direction from one diagonal to another.

.container>div:nth-child(5){
            background: linear-gradient(to bottom right, red, yellow);
        }

effect

CSS3 linear gradient

Use multiple colors

You don’t have to be limited to two colors. You can use as many colors as you want! By default, the colors you set are evenly distributed across the gradient path.

.container>div:nth-child(7){
            background: linear-gradient(to right, red,yellow,green);
        }

effect

CSS3 linear gradient

Color end position

You don’t need to end the color you set in the default position. You can adjust the position of each color by setting 0, 1% or 2% or other absolute values. If you set the position as a percentage,0%It represents the starting point and 100% represents the end point, but you can also set other values outside this range to achieve the effect you want if necessary. If you do not explicitly set some positions, it will be automatically calculated. The first color will stop at 0%, while the last color is 100%, and the other colors will stop in the middle of the two adjacent colors.

.multicolor-linear { 
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

effect

CSS3 linear gradient

Color transparency

Gradients support transparency, so you can use transparency to achieve some beautiful effects.

.container>div:nth-child(8){
            background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
        }

effect

CSS3 linear gradient