<gradient>=[<linear-gradient()>|<repeating-linear-gradient()>|<radial-gradient()>|<repeating-radial-gradient()>|<conic-gradient()>|<repeating-conic-gradient()>]
A gradient is drawn into a box with the dimensions of the concrete object size, referred to as thegradient box. However, the gradient itself has no natural dimensions.
linear-gradient-syntax
<linear-gradient-syntax>=[[<angle>|to<side-or-corner>]||<color-interpolation-method>]?,<color-stop-list><side-or-corner>=[left|right]||[top|bottom]
Angle and to side-or-corner relation:
Use thebackground image property to create a linear, radial or conic gradient.
Use thelinear-gradient keyword to create a linear gradient.
Use-moz-,-o-, and-webkit- as a prefix to thelinear-gradient keyword for support on older browsers
#corpnav,#searchbar{color:#999;background-image:-o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200));/* for Opera 11.1 and 12 */background-image:-moz-linear-gradient(top,rgb(49,49,49),rgb(7,7,7));/* for Firefox 3.6-15 */background-image:-webkit-linear-gradient(top,rgb(100,100,100),rgb(200,200,200));/* for Chrome 10-25, Safari 5.1 and 6 */background-image:linear-gradient(top,rgb(100,100,100),rgb(200,200,200));/* for IE 10+, Edge, Safari 6.1+, Opera 12.1+, Chrome 26+, Firefox 16+ */}
color-interpolation-method:[1][2]
<color-interpolation-method>=in[<rectangular-color-space>|<polar-color-space><hue-interpolation-method>?]<rectangular-color-space>=srgb|srgb-linear|display-p3|a98-rgb|prophoto-rgb|rec2020|lab|oklab|xyz|xyz-d50|xyz-d65<polar-color-space>=hsl|hwb|lch|oklch<hue-interpolation-method>=[shorter|longer|increasing|decreasing]hue=in[<rectangular-color-space>|<polar-color-space><hue-interpolation-method>?]<rectangular-color-space>=srgb|srgb-linear|display-p3|a98-rgb|prophoto-rgb|rec2020|lab|oklab|xyz|xyz-d50|xyz-d65<polar-color-space>=hsl|hwb|lch|oklch<hue-interpolation-method>=[shorter|longer|increasing|decreasing]hue
Smooth or striped gradient
/* This is smooth */ background: linear-gradient(deepskyblue, tomato);
/* This is striped */ background: linear-gradient(deepskyblue 50%, tomato 50%);
| Css code | description | Preview image |
|---|---|---|
linear-gradient(inlabtoright,white,#01E) | CIE Lab gradient, which avoids the too-dark midpoint but has a significant purple cast; | |
linear-gradient(insrgbtoright,white,#01E) | gamma-encoded sRGB gradient, is too dark at the midpoint, is a little desaturated, and has a slight purplish cast | |
linear-gradient(inOklabtoright,white,#01E) | Oklab gradient, giving a more perceptually uniform result with no purple cast at all | |
linear-gradient(inOklabtoright,#44C,#795) | Oklab gradient, perceptually uniform result with no purple cast at all | |
linear-gradient(inOklabtoright,black,#01E) | Oklab gradient, perceptually uniform result |
| srgb | |
| srgb-linear | |
| display-p3 | |
| a98-rgb | |
| prophoto-rgb | |
| rec2020 | |
| lab | |
| Oklab gradient, perceptually uniform result | |
| xyz | |
| xyz-d50 | |
| xyz-d65 |
| hsl shorter hue | |
| hsl longer hue | |
| hsl increasing hue | |
| hsl decreasing hue |
| hwb shorter hue | |
| hwb longer hue | |
| hwb increasing hue | |
| hwb decreasing hue |
to do: hwb, lch, oklch. x shorter | longer | increasing | decreasing ] hue
| Css code | description | Preview image |
|---|---|---|
linear-gradient(inOklabtoright,black,white) | Oklab gradient, perceptually uniform result | |
linear-gradient(inlabtoright,black,white) | lab gradient, | |
linear-gradient(insrgbtoright,black,white) | srgb gradient | |
linear-gradient(toright,hsla(0,0%,0%,0.8),transparent) | ||
linear-gradient(insrgbtoright,black,white) | ||
linear-gradient(cyan,yellow); | combining easing functions and multiple color stops to create approximations that look smoother than plain linear-gradients[3] |
| Css code | description | Preview image |
|---|---|---|
linear-gradient(toleft,violet,indigo,blue,green,yellow,orange,red); | VIBGYOR rainbow | |
linear-gradient(90deg,rgba(2,0,36,1)0%,rgba(9,9,121,1)35%,rgba(0,212,255,1)100%); | ||
linear-gradient(toleft,lime25%,red25%50%,cyan50%75%,yellow75%); | the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect. |
multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect
Color wheels are convenient for comparing colors expressed in polar or cylindrical coordinates, like hsl(), hwb(), or lch().
RGBA color wheelColor wheels are convenient for comparing colors expressed in polar or cylindrical coordinates, like hsl(), hwb(), or lch().
HSLA color wheels
HSL color wheel
Links