linear-gradient
Description
The linear-gradient function for CSS specifies the color space and path to use when interpolating colors on the gradient line.
Syntax
CSS
linear-gradient()
Values
<linear-gradient()> = linear-gradient( [ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list> )
<angle>
A number with a unit: deg (360 degrees in a full circle), grad (400 gradians in a full circle), rad (2π radians in a full circle), or turn (1 turn in a full circle).
<side-or-corner> = [ left | right ] || [ top | bottom ]
left
Left
right
Right
top
Top
bottom
Bottom
<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> = srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65
srgb
Accepts three numeric parameters, representing red, green, and blue. In-gamut colors have all three components in the range [0, 1]. The whitepoint is D65.
srgb-linear
The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).
lab
Accepts three numeric parameters, representing lightness and hue (a axis and b axis).
oklab
Improved lab.
xyz
Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D65.
xyz-d50
Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D50.
xyz-d65
Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D65.
<polar-color-space> = hsl | hwb | lch | oklch
hsl
Accepts three numeric parameters, representing hue, saturation, and lightness.
hwb
Accepts three numeric parameters, representing hue, whiteness, and blackness.
lch
Accepts three numeric parameters, representing lightness, chroma, and hue.
oklch
Improved lch.
<hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue
shorter
Shorter
longer
Longer
increasing
Increasing
decreasing
Decreasing
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <color-stop-length>?
<color()> = color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<colorspace-params> = <predefined-rgb-params> | <xyz-params>
<predefined-rgb-params> = <predefined-rgb> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020
srgb
The same as legacy sRGB colors, such as rgb().
srgb-linear
The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).
display-p3
It uses the same primary chromaticities as [DCI-P3], but with a D65 whitepoint, and the same transfer curve as sRGB.
a98-rgb
The transfer curve is a gamma function, close to but not exactly 1/2.2.
prophoto-rgb
The transfer curve is a gamma function with a value of 1/1.8, and a small linear portion near black. The white point is D50.
rec2020
ITU Reference 2020 is used for Ultra High Definition, 4k and 8k television.
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
none
Specifies a missing component.
<xyz-params> = <xyz-space> [ <number> | <percentage> | none ]{3}
<xyz-space> = xyz | xyz-d50 | xyz-d65
xyz
Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.
xyz-d50
Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D50.
xyz-d65
Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
none
Specifies a missing component.
<alpha-value> = <number> | <percentage>
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
none
Specifies a missing component.
<color-stop-length> = <length-percentage>{1,2}
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).