The light-dark() function takes two color values—one for “light” mode and one for “dark” mode, and automatically switches between them depending on […]

html { color: light-dark(#000, #fff); }

The lab() color function represents colors in the CIELAB color space. It displays them according to their lightness, red/green axis position, blue/yellow axis position, and an optional alpha transparency value.

.element { color: lab(50% 50% 50% / 0.5); }

The lch() color function specifies colors in the CIELAB color space. Unlike the lab() function — which uses Cartesian coordinates — the lch() function uses polar coordinates to set color in terms of its hue and chroma, which is generally more intuitive.

.element { color: lch(10% 0.215 15deg); }

The linear() function let us define stops in an animation/transition, which will progress sequentially along a straight line.

.element { animation-timing-function: linear(0, 0.25, 1); }

Creates a gradient by placing colors perpendicularly along a straight line and smoothly transitioning between them.

.element { background-image: linear-gradient(slateblue, tomato); }