Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

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 (%).

Examples

1 · color

2 · color · color-stop-length

3 · angle

4 · side-or-corner

5 · color-interpolation-method · rectangular-color-space

6 · color-interpolation-method · polar-color-space

7 · color-interpolation-method · polar-color-space · hue-interpolation-method

8 · JS

conic-gradient

radial-gradient

repeating-conic-gradient

repeating-linear-gradient

repeating-radial-gradient

abs

acos

asin

atan

atan2

attr

calc

clamp

color

conic-gradient

cos

counter

counters

hsl

hsla

hwb

lab

lch

matrix

matrix3d

max

min

mod

oklab

oklch

param

perspective

radial-gradient

rem

repeating-conic-gradient

repeating-linear-gradient

repeating-radial-gradient

rgb

rgba

rotate

rotate3d

rotateX

rotateY

rotateZ

round

scale

scale3d

scaleX

scaleY

scaleZ

sin

skew

skewX

skewY

src

tan

translate

translate3d

translateX

translateY

translateZ

url

var

World Wide Web Consortium (W3C)

HomeMenu