CSS gradients are image values generated algorithmically by the browser rather than loaded from a file, making them resolution-independent, infinitely scalable, and lightweight. Introduced in CSS3 and refined through subsequent specifications, gradients can be used anywhere the CSS image type is accepted, most commonly as background-image values but also in border-image, list-style-image, and even mask-image properties. The three gradient types each produce fundamentally different visual effects by defining how colors transition through space.

Linear gradients (linear-gradient) create color transitions along a straight line defined by an angle or direction keyword. The gradient line runs through the center of the element at the specified angle, and color stops are placed along this line at specific positions. The browser calculates the perpendicular color for every pixel in the element, producing smooth bands of color. Angles are measured clockwise from the top (0deg points up, 90deg points right), and direction keywords like "to bottom right" are translated to the equivalent angle. Hard color stops, where two colors share the same position, create sharp lines without transitions, enabling techniques like CSS-only striped backgrounds.

Radial gradients (radial-gradient) emanate outward from a center point in either circular or elliptical shapes. The gradient's shape, size, and center position can all be controlled. Size keywords like closest-side, farthest-corner, and explicit dimensions determine where the gradient ends, affecting how colors spread across the element. Conic gradients (conic-gradient), the newest addition, sweep colors around a center point like the hands of a clock, making them ideal for pie charts, color wheels, and decorative radial patterns. The starting angle and center position are configurable, and repeating variants of all three types (repeating-linear-gradient, etc.) create tiled patterns.

Color interpolation in gradients is more nuanced than it first appears and depends on the color space used for blending. Traditional CSS gradients interpolate in the sRGB color space, which can produce muddy or desaturated midtones when transitioning between certain color pairs, particularly complementary colors. The CSS Color Level 4 specification introduces the ability to specify interpolation color spaces using the "in" keyword (e.g., linear-gradient(in oklch, red, blue)). The oklch and lab color spaces produce perceptually uniform transitions that appear smoother and more vibrant to the human eye, because they are designed around human color perception rather than display hardware characteristics. This advancement gives designers precise control over how colors blend, eliminating the washed-out transitions that plagued earlier CSS gradient implementations.