Css3 linear gradient

Definition and Usage

The linear-gradient() function is used to create an “image” of a linear gradient.

To create a linear gradient, you need to set the gradient effect for a starting point and a direction (specified as an Angle). You also have to define the end color. Stop colors are the transitions you want Gecko to smooth, and you must specify at least two, although you can specify more colors to create more complex gradients.

grammar

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

<angle>

Specify the direction (or Angle) of the gradient with an Angle value. The Angle increases clockwise. 0 degrees means the gradient goes from bottom to top and 90 degrees means the gradient goes from left to right. The Angle increases clockwise. The unit is DEg.

defines the direction of the gradient by keyword. There are two keywords, one for horizontal position (left or right) and one for vertical position (top or bottom). The order of keywords does not matter and is optional.

<linear-color-stop>

Consists of a
value followed by an optional end position (either a percentage value or a

along the gradient axis). CSS gradient color rendering follows the same rules as SVG.

<color-hint>

The color transition point is an interpolation hint that defines how the gradient between adjacent colors will work. The length defines the point between two colors at which the stop gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transformation is the midpoint between the stops of the two colors.

The instance

Fundamental 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 and can specify any number.

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

The effect

The gradient prompt

By default, gradients move smoothly from one color to another. You can set a value to move the center 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);
        }
Copy the code

The effect

Change the gradient direction

By default, the direction of a linear gradient is from top to bottom, and 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 - define the direction of the reference line of the linear gradient by keyword *color-stop - indicate the color and position of the linear gradient */ background: linear-gradient(to right, red, yellow); }Copy the code

The effect

Set gradient Angle

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

.container>div:nth-child(4) {/* * background: linear-gradient(angle, color-stop1, color-stop2, ...) ; * Angle - indicates the Angle unit of the base line of the linear asymptote. Deg *color-stop - indicates the color and position of the linear gradient. */
            background: linear-gradient(0deg, red , yellow);
        }
Copy the code

The effect

When using angles, 0deg means gradient from bottom to top, 90deg means gradient from left to right, and other positive angles are clockwise. And a negative Angle means counterclockwise.

Diagonal gradient

You can even set the gradient direction to go from one corner to the other.

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

The effect

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 are evenly distributed across the gradient path.

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

The effect

Color stop position

You don’t need to let the color you set end at the default position. You can adjust the position of each color by setting it to 0, 1% or 2% or some other absolute value. If you set the position to a percentage, 0% indicates the starting point and 100% indicates the end point, but you can set other values outside of this range if necessary to achieve the desired effect. If there are some positions that you do not specify, it will be calculated automatically, the first color will stop at 0%, the last color will stop at 100%, and the other colors will stop at the middle of the two adjacent colors.

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

The effect

Color transparency

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

.container>div:nth-child(8) {background: linear-gradient(to right, rgba(255.0.0.0), rgba(255.0.0.1));
        }
Copy the code

The effect