Syntax of CSS linear-gradient ()

The CSS linear-gradient () function creates a <image> that represents a linear gradient of color. The result of the function is a CSS <gradient> data type object. Like any other gradient, the CSS linear gradient is not a CSS <color>, but an image with no intrinsic dimensions; That is, it does not have an intrinsic or preferred size, nor does it have a ratio. Its specific size will match the dimensions of its applicable elements.

A linear gradient is defined by an axis (gradient line) with a different color for each point on it. The vertical line to the gradient line has a single color, a point on the gradient line.

The gradient line is defined by the center point and an angle of the container that contains the gradient shape. The color values on the gradient line are defined by different points, including the starting point, the end point, and an optional intermediate point between the two (the middle point can have more than one).

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 over the container vertex. (The vertical line is in the same quadrant as the gradient line)

Similarly, the end point is the dot 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 emitted from the nearest vertex, but defining the ending point from the point of origin is a much easier way to understand it because the end point is the point of origin about the center point of the container.

A slightly more complex definition of the starting and ending points leads to an interesting nature, sometimes called the magical vertex effect: points near the starting point have the same color value as the starting point, and the points near the end point have the same color value as the end point.

Not only the color values of the start and end points can be specified. Providing an additional color midpoint, Web developers can create custom transitions between the starting and ending color values, as well as a gradient line with multiple color values.

The linear gradient syntax does not allow repeating gradients, but the same effect can be achieved with the use of the color intermediate values. CSS properties allow you to achieve a true repeating gradient effect.

When the position of the middle point of the color is implicitly defined, it is placed at the midpoint between the point before it and the point that is behind it. Use the <length> or <percentage> data type to display a defined location.

Gradients are defined as <image> data types in CSS, so in CSS it can only be used where the image data type is needed. For this reason, linear-gradient is not valid in Background-color and other properties that require a value of <color>.

Grammar

formal grammar:linear-gradient ([<angle> | To <side-or-corner>,]? & lt;color-stop> [, <color-stop>]+) \---------------------------------/\--------                        --------------------/definition of the gradient line List of color stops where <side-or-corner> = [left | right] | | [Top | bottom] and <color-stop> = <color> [<percentage> | <length>]?< /pre>

Linear-gradient (45deg, blue, red);           /* A gradient on 45deg axis starting blue and finishing red */linear-gradient (to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue                                                   and finishing Red */linear-gradient (0deg, Blu E, Green 40%, red); /* A gradient going from the bottom to top, starting blue, being green after 40% and                                                   finishing Red */

Value

<side-or-corner>

Describes the starting point position of the gradient line. It contains two keywords: the first one indicates the vertical position of left or right, the second indicates the horizontal position top or bottom. The order of the keywords has no effect and is optional.
To-top, to-bottom, to-left and to-right values are converted to angles 0 degrees, 180 degrees, 270 degrees, and 90 degrees. The remaining values are converted to an angle that rotates clockwise from the top of the center direction. The end point of the gradient line is symmetric with its starting point center.

<angle>

Specifies the direction (or angle) of the gradient with an angle value. See <angle>.

<color-stop>

Consists of a <color> value followed by an optional end position (which can be a percentage value or <length> along the gradient axis).

The CSS gradient's color rendering takes the same rules as SVG.

Grammar history

Linear-gradient's grammar was developed by first Apple proposal, which was implemented in 2008.

-webkit-gradient (<TYPE>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

In the initial syntax, linear and radial gradients are implemented using the same syntax. However, the parameters required for these two gradients are different, resulting in the need to add the first parameter to differentiate between the two gradients. If you increase the gradient type again, this will become more complex. For example, tapered gradients require functions and non-canonical CSS values. No draft has been received by the consortium.

An alternative syntax was proposed and implemented by Mozilla in 2009. This syntax requires two CSS functions, one for a linear gradient, and another for a radial gradient. However, this syntax has not been released as a product implementation. A third syntax has been proposed, which simplifies the syntax of linear gradients to:

-moz-linear-gradient ([[top | bottom] | | [left | right]],]? <color-stop>[, <color-stop>]+);

The new syntax does not require the to (), the From (), and the Color-stop () functions, so these functions are discarded. The order of Top/bottom and Left/right is also marked as unimportant, so Mozilla removes the need to first define the limits of the Top/bottom.

The new syntax still has one drawback: it only allows horizontal and vertical gradients. After multiple changes resolved the issue of the direction limit, it was added to CSS Images Values and Content replacement level 3 draft in 2011-02-17.

Native support <angle> allow gradients in any direction

Simplifies developer work by defining the Magic Corner algorithm, which allows you to define the color of the endpoint in a simple way

Defines the transition color in the pre-multiply color space, which prevents vainly disobey from appearing gray with different transparency colors. Without discarding the native syntax, the prefixed version is implemented by WebKit and Trident (IE).

Linear-gradient ([[<angle> | [top | bottom] | | [left | right]],]? <color-stop>[, <color-stop>]+);

The addition of the <angle> attribute leads to some confusion, it should point to the end direction, but these keywords usually refer to the starting direction. In related CSSWG thread can see some discussions. In a new syntax, this problem is fixed. It still uses the direction keyword, but adds the keyword to before the keyword. This syntax is added to CSS Images Values and Content replacement level 3 draft in 2011-09-08.

Linear-gradient ([[<angle> | to [top | bottom] | | [left | right]],]? <color-stop>[, <color-stop>]+);

The above should be the final syntax.

"Recommended"

1. CSS3 Free Video Tutorial

2. Examples of linear-gradient in CSS3

3. How to use lineaer-gradient in CSS3

4. In-depth explanation CSS3 oblique linear gradient lineaer-gradient

5. A detailed explanation of linear-gradient parameters in CSS3