CSS Gradients: Linear vs Radial, and Why Angle Direction Confuses Everyone

A linear gradient transitions colors along a straight line at a specified angle, while a radial gradient transitions outward from a center point in expanding circles or ellipses — the fundamental difference is a straight directional flow versus an outward radiating one.

CSS gradient angles are measured clockwise from the top (0deg points up, 90deg points right), which is the opposite convention from standard mathematical angle measurement, where 0 degrees typically points right and angles increase counter-clockwise. This mismatch is a common source of a gradient rendering "backwards" from what a developer expected.

Color stops — specifying not just which colors to use but at what percentage along the gradient each one should be fully reached — give far more control than an evenly-spaced default gradient, letting a designer create a sharp transition, an uneven blend, or even a solid-color band by placing two stops at the same position.

1. Mathematical Rendering of CSS Gradients

In modern web design, CSS gradients are classified by the W3C specification not as colors, but as **computed `<image>` data types**. Unlike raster image files (JPEG, PNG, WebP) that download static pixel grids over HTTP, CSS gradients are generated procedurally by the browser's graphics rendering engine (GPU/Skia) at 60+ frames per second. Because gradients are computed mathematically, they possess zero file download latency, scale infinitely to high-DPI Retina screens without pixelation, and animate fluidly.

2. Linear Gradients: Angles, Vectors, and the Gradient Line

A linear gradient transitions colors smoothly along a straight directional vector termed the **Gradient Line**: `background: linear-gradient(direction, color-stop-1, color-stop-2, ...);` The direction can be declared via keywords (`to right`, `to bottom left`) or precise angular degrees (`deg`): - **The CSS Angle Direction Confusion:** In standard school mathematics, `0 deg` points to the right (3 o'clock) on a Cartesian unit circle and increments counter-clockwise. - **In CSS Specifications:** `0 deg` points **straight UP (12 o'clock)**, and increments **clockwise** (`90deg` points to the right at 3 o'clock; `180deg` points down to 6 o'clock). - The length of the gradient line is determined by the distance between the two opposite corner coordinates of the element box.

3. Radial Gradients: Ellipses, Foci, and Sizing Keywords

A radial gradient transitions colors outward in all directions from a central origin point: `background: radial-gradient(shape size at position, color-stop-1, ...);` - **Shape:** `circle` (uniform radius) or `ellipse` (stretches to match container aspect ratio). - **Position:** Centers the gradient origin (e.g. `at center`, `at top left`, or `at 20% 80%`). - **Sizing Keywords:** - `closest-side:` Radius extends to the nearest container edge. - `farthest-corner (default):` Radius extends to the most distant corner, ensuring complete container coverage.

4. Color Interpolation and the 'Gray Dead Zone'

When transitioning between complementary colors (e.g. blue to yellow) in the default sRGB color space, gradients pass through a muddy, desaturated 'gray dead zone' in the midpoint because sRGB color channels interpolate non-linearly. Modern CSS Color Module Level 4 introduces **perceptual color spaces**: `linear-gradient(in oklab, #00f, #ff0)` Interpolating in polar spaces like `in oklch` or `in oklab` preserves vivid saturation and constant perceived lightness throughout the entire color transition.

5. Frequently Asked Questions on CSS Gradients

Can you stack multiple gradients on the same element? Yes. CSS allows comma-separated background layers (`background: linear-gradient(...), radial-gradient(...);`). Layers render in top-to-bottom order like physical acetate sheets. ### What are hard color stops? Placing two color stops at the exact same percentage (e.g. `red 50%, blue 50%`) creates an instant, crisp stripe without any color transition. ### How does `repeating-linear-gradient` work? It tiles a short gradient pattern continuously across the container, commonly used to create barber-pole stripes or canvas grid textures.

6. Strategic Takeaways

Remember that CSS angle 0deg points upward and progresses clockwise. Use modern color interpolation spaces (`in oklch`) to eliminate dull midpoints, and combine hard color stops for lightweight procedural patterns.