Cascading Style Sheets/Gradients
<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 the gradient box. However, the gradient itself has no natural dimensions.
linear-gradient
editlinear-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:
- 0deg is equivalent to to top.
- 90deg is equivalent to to right.
- 180deg is equivalent to to bottom.
- 270deg is equivalent to to left.
- 360deg brings you back to to top again.
Use the background image
property to create a linear, radial or conic gradient.
Use the linear-gradient
keyword to create a linear gradient.
Use -moz-
, -o-
, and -webkit-
as a prefix to the linear-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%);
non repeating
editTwo color continous gradients
editCss code | description | Preview image |
---|---|---|
linear-gradient(in lab to right, white, #01E)
|
CIE Lab gradient, which avoids the too-dark midpoint but has a significant purple cast; | |
linear-gradient(in srgb to right, white, #01E)
|
gamma-encoded sRGB gradient, is too dark at the midpoint, is a little desaturated, and has a slight purplish cast | |
linear-gradient(in Oklab to right, white, #01E)
|
Oklab gradient, giving a more perceptually uniform result with no purple cast at all | |
linear-gradient(in Oklab to right, #44C, #795)
|
Oklab gradient, perceptually uniform result with no purple cast at all | |
linear-gradient(in Oklab to right, black, #01E)
|
Oklab gradient, perceptually uniform result |
Gray gradients in various color spaces
editsrgb | |
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(in Oklab to right, black, white)
|
Oklab gradient, perceptually uniform result | |
linear-gradient(in lab to right, black, white)
|
lab gradient, | |
linear-gradient(in srgb to right, black, white)
|
srgb gradient | |
linear-gradient(to right, hsla(0, 0%, 0%, 0.8), transparent)
|
||
linear-gradient(in srgb to right, black, white)
|
||
linear-gradient(cyan, yellow);
|
combining easing functions and multiple color stops to create approximations that look smoother than plain linear-gradients[3] |
Multicolor gradients ( multi-position color-stops), continous and striped
editCss code | description | Preview image |
---|---|---|
linear-gradient(to left, 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(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75%);
|
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. |
conic gradients
editmulti-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 wheel Color wheels are convenient for comparing colors expressed in polar or cylindrical coordinates, like hsl(), hwb(), or lch().
HSLA color wheels
HSL color wheel
- Hue is changing from 0 to 360 degrees
- saturation is constant and max = 100 %
- lightness is constant and max = 100%
- longer hue interpolation method
Links