Cascading Style Sheets/Gradients

From Wikibooks, open books for an open world
Jump to navigation Jump to search


<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[edit | edit source]

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:[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[edit | edit source]

Two color continous gradients[edit | edit source]

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[edit | edit source]

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[3]

Multicolor gradients ( multi-position color-stops), continous and striped[edit | edit source]

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[edit | edit source]

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

References[edit | edit source]

CSS3 Linear Gradients

  1. drafts.csswg org: css-color-4
  2. developer.mozilla : CSS hue-interpolation-method
  3. Easing Linear Gradients by Andreas Larsen on May 8, 2017 (Updated on May 12, 2017)