nền gradient

/* A gradient tilted 45 degrees, starting xanh lơ and finishing red */ linear-gradient(45deg, blue, red); /* A gradient going from the bottom right to tát the top left corner, starting xanh lơ and finishing red */ linear-gradient(to left top, blue, red); /* màu sắc stop: A gradient going from the bottom to tát top, starting xanh lơ, turning green at 40% of its length, and finishing red */ linear-gradient(0deg, blue, green 40%, red); /* màu sắc hint: A gradient going from the left to tát right, starting red, getting to tát the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to tát change to tát xanh lơ */ linear-gradient(.25turn, red, 10%, blue); /* Multi-position color stop: A gradient tilted 45 degrees, with a red bottom-left half and a xanh lơ top-right half, with a hard line where the gradient changes from red to tát xanh lơ */ linear-gradient(45deg, red 0 50%, xanh lơ 50% 100%);

<side-or-corner>

The position of the gradient line's starting point. If specified, it consists of the word to and up to tát two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter. If unspecified, it defaults to tát to bottom.

The values to top, to bottom, to left, and to right are equivalent to tát the angles 0deg, 180deg, 270deg, and 90deg, respectively. The other values are translated into an angle.

<angle>

The gradient line's angle of direction. A value of 0deg is equivalent to tát to top; increasing values rotate clockwise from there.

<linear-color-stop>

A color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis).

<color-hint>

An interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

As with any gradient, a linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to tát.

To create a linear gradient that repeats to tát fill its container, use the repeating-linear-gradient() function instead.

Because <gradient>s belong to tát the <image> data type, they can only be used where <image>s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.

A linear gradient is defined by an axis—the gradient line—and two or more color-stop points. Each point on the axis is a distinct color; to tát create a smooth gradient, the linear-gradient() function draws a series of colored lines perpendicular to tát the gradient line, each one matching the color of the point where it intersects the gradient line.

The gradient line is defined by the center of the box containing the gradient image and by an angle. The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

The starting point is the location on the gradient line where the first color begins. The ending point is the point where the last color ends. Each of these two points is defined by the intersection of the gradient line with a perpendicular line passing from the box corner which is in the same quadrant. The ending point can be understood as the symmetrical point of the starting point. These somewhat complex definitions lead to tát an interesting effect sometimes called magic corners: the corners nearest to tát the starting and ending points have the same color as their respective starting or ending points.

Customizing Gradients

By adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using a <length> or a <percentage>. If you don't specify the location of a color, it is placed halfway between the one that precedes it and the one that follows it. The following two gradients are equivalent.

By mặc định, colors transition smoothly from the color at one color-stop to tát the color at the subsequent color-stop, with the midpoint between the colors being the halfway point between the color transition. You can move this midpoint to tát any position between two color-stops by adding an unlabelled % color hint between the two colors to tát indicate where the middle of the color transition should be. The following example is solid red from the start to tát the 10% mark and solid xanh lơ from 90% to tát the over. Between 10% and 90% the color transitions from red to tát xanh lơ, however, the midpoint of the transition is at the 30% mark rather kêu ca 50% as would have happened without the 30% color hint.

Xem thêm: chu vi diện tích hình tròn

If two or more color-stops are at the same location, the transition will be a hard line between the first and last colors declared at that location.

Color-stops should be listed in ascending order. Subsequent color-stops of lower value will override the value of the previous color-stop creating a hard transition. The following changes from red to tát yellow at the 40% mark, and then transitions from yellow to tát xanh lơ over 25% of the gradient:

Multi-position color-stops are allowed. A color can be declared as two adjacent color-stops by including both positions in the CSS declaration. The following three gradients are equivalent:

By mặc định, if there is no color with a 0% stop, the first color declared will be at that point. Similarly, the last color will continue to tát the 100% mark, or be at the 100% mark if no length has been declared on that last stop.

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

<side-or-corner> =
[ left | right ] ||
[ top | bottom ]

<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> =
<color> &&
<length-percentage>?

<linear-color-hint> =
<length-percentage>

<length-percentage> =
<length> |
<percentage>

This example uses multi-position color-stops, with adjacent colors having the same color-stop value, creating a striped effect.

Please see using CSS gradients for more examples.