# Cascading Style Sheets/Gradients

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
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
color-interpolation-method:
Smooth or striped gradient

### non repeating
#### Two color continous gradients

| Css code | description |
| 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 |
| 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 |
| 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
* ↑ drafts.csswg org: css-color-4
* ↑ developer.mozilla : CSS hue-interpolation-method
* ↑ Easing Linear Gradients by Andreas Larsen on May 8, 2017 (Updated on May 12, 2017)