Vibrant Gradients

Adding background gradients adds interest to an otherwise static page. Upgraded gradients with smoother transitions and vibrant colors is achieved with a simple css property supported by most modern browsers.

Standard web-safe colors were defined in the sRGB color space developed by Microsoft and HP in 1996 to display reliable colors across monitors, printers, and the internet. Advances since then, in monitor, printer, and browser technology, allow access to 50% more colors than those supported in the CSS standard.

Lightness, Chroma, Hue (LCH) is a color space that applies this wider range of color to css with the addition of a simple 2-word element ("in lch") to standard gradient styles.

In addtion to the usual style definitions below, we have added the lch color space to compare. The gradents on the right provide compatibility for older browsers that do not support the new color space by including the standard gradient style before the lch background definition in the stylesheet.

For more technical information on the LCH color space, check out Lee Verou's excellent article on the whys and wherefores. You can also find a link to a handy LCH color generator there.

background: linear-gradient(red, green, blue);

background: linear-gradient(red, green, blue);
background: linear-gradient(in hsl, red, green, blue);

background: radial-gradient(red, green, blue);

background: radial-gradient(red, green, blue);
background: radial-gradient(in lch, red, green, blue);

background: conic-gradient(red, green, blue, red);

background: conic-gradient(red, green, blue, red);
background: conic-gradient(in lch, red, green, blue, red);