Gradient Generator

A CSS gradient is not a picture but a generated image function, evaluated at paint time and resized to whatever box it fills, which is why it costs no HTTP request and never pixelates. The three families differ in geometry. A linear gradient runs along a gradient line set by an angle where 0deg points to the top of the box and values increase clockwise, so 90deg runs left to right and 180deg top to bottom. A radial gradient interpolates outward from a centre as a circle or ellipse, with extent keywords from closest-side to farthest-corner, the default. A conic gradient sweeps around the centre by angle rather than distance, which makes it usable for pie charts and colour wheels. Colour stops are positions along that path; two at the same position produce a hard edge instead of a blend. Two artefacts dominate practical work. The first is the muddy midpoint: default interpolation happens per channel in gamma-encoded sRGB, so blending two saturated complementary hues passes through a desaturated grey or brown. Adding a deliberate middle stop fixes it, and CSS Color 4 allows specifying an interpolation space such as oklab or oklch. The second is banding: with 8 bits per channel there are only 256 levels, so a gradient with low colour distance stretched across a large area shows visible steps, usually mitigated with a subtle noise overlay. The RGB colour distance reported here is plain Euclidean distance, capped near 441 for black to white, and is a rough proxy rather than a perceptual metric such as CIEDE2000.

Before browsers could draw gradients, designers exported them from image editors and repeated a one-pixel-wide slice along an axis, a technique that broke whenever a container resized and that added a network request for what is fundamentally a mathematical function. The first native implementation came from WebKit in 2008 with the prefixed -webkit-gradient() notation, which took the start and end points as function arguments in a syntax quite unlike what eventually became standard. Mozilla implemented a different and more readable form, -moz-linear-gradient, in Firefox 3.6 in 2010, and it was that approach which the W3C carried into the CSS Image Values and Replaced Content Module Level 3. Standardisation changed one detail that still causes confusion. The angle convention was redefined during the specification process so that 0deg points upward and angles increase clockwise, whereas the earlier prefixed implementations measured from a different origin. Old code copied from tutorials of that era therefore renders rotated unless the prefixed and unprefixed forms are both written correctly, which is why generator tools became common. Conic gradients came later, specified in CSS Images Level 4 and demonstrated widely through a JavaScript polyfill Lea Verou released in 2015, before native support arrived in Chrome 69 in 2018 and spread to other engines. The most recent shift is colour interpolation: CSS Color Level 4 lets a gradient specify the space it blends in, which addresses the long-standing complaint about grey midpoints inherited from sRGB blending.