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  property to create a linear, radial or conic gradient.

Use the  keyword to create a linear gradient.

Use,  , and   as a prefix to the   keyword for support on older browsers

color-interpolation-method:

Smooth or striped gradient

/* This is smooth */ background: linear-gradient(deepskyblue, tomato);

/* This is striped */ background: linear-gradient(deepskyblue 50%, tomato 50%);

Gray gradients in various color spaces
to do: hwb, lch, oklch. x shorter | longer | increasing | decreasing ] hue

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