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

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:

• 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:

<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

Two color continous gradients

Css 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

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(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

Multicolor gradients ( multi-position color-stops), continous and striped

Css 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

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 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

• conic-gradient by Lea Verou

References

CSS3 Linear Gradients