linear-gradient() - CSS | Mdn css gradient
Aswithanygradient,alineargradienthasnointrinsicdimensions[1];i.e.,ithasnonaturalorpreferredsize,norapreferredratio.Itsconcretesizewillmatchthesizeoftheelementitappliesto.Tocreatealineargradientthatrepeatssoastofillitscontainer,usetherepeating-linear-gradient()[2]functioninstead.Because
As with any gradient, a linear gradient has no intrinsic dimensions[1]; 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.
To create a linear gradient that repeats so as to fill its container, use the repeating-linear-gradient()[2] function instead.
Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, linear-gradient() wont work on background-color[3] and other properties that use the <color>[4] 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 create a smooth gradient, the linear-gradient() function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.
The gradient line is defined b...