CSS Gradient Functions Table
| Function | Syntax | Field note |
|---|---|---|
linear-gradient() | direction (to right, 45deg), stops | 0deg points UP - compass bearing, not math angles |
radial-gradient() | shape at position, stops | Sizing keywords matter: closest-side vs farthest-corner change the falloff |
conic-gradient() | from angle at position, stops | Sweeps AROUND a point - pie charts with zero SVG |
repeating-linear-gradient() | same, but the pattern tiles | Stripes, ruled paper, hazard tape - zero image requests |
hard stops | red 40%, blue 40% (same position) | Two stops at one position = crisp edge, no blend - the stripe trick |
color stop hints | red, 40%, blue | A bare percentage BETWEEN colors moves the transition midpoint |
gradient + background-size | small tile + repeat | Gradients tile like any background image - tiny file, infinite pattern |
subpixel slack | black 20px, transparent 20.5px | 0.5px overlap kills hard-stop anti-aliasing seams |
Gradients are generated IMAGES: linear-gradient(), radial-gradient() and conic-gradient() produce a value anywhere an image is valid - background, border-image, mask - which is why one function call can be a photo-free pie chart, notebook paper or hazard stripes with zero network requests.
Bottom line: hard stops (two color stops at the same position) make crisp stripes instead of blends - that single trick converts every gradient into a pattern generator, and repeating-linear-gradient tiles it forever. The direction trap to remember: 0deg points UP (compass bearing, not the math unit circle), so write to right when you mean right.
The honest part: gradients interpolate color between stops, and the color space decides whether the middle looks smooth. srgb interpolation goes muddy between vivid endpoints; engines that interpolate in oklch keep perceptual evenness - which is the same uniformity argument from the color functions, applied to every blend on the page.
How to use
- Stripe anything: background: repeating-linear-gradient(45deg, #222 0 10px, #ffcc00 10px 20px) - construction-tape with no asset, scales to any element.
- Chart without SVG: conic-gradient(a 0 40%, b 0 70%, c 0) - hard stops at percentage boundaries draw a pie; add border-radius: 50% for the wheel.
- Kill seams: where a hard stop shows a faint line at certain zooms, overlap half a pixel - #0000 20px, #000 20.5px - and the band disappears.
Frequently asked questions
Why do my hard-stop stripes show faint gray lines?
Anti-aliasing. When a gradient edge lands between device pixels, the browser blends the two colors across the boundary - at hairline widths that blend reads as a gray seam. The standard fix is subpixel slack: give the boundary half a pixel of overlap (transparent 20px, black 20.5px) so the anti-aliased edge has room to resolve. On high-DPI screens the effect is subtler but still visible at some zoom levels, which is why pattern libraries bake the 0.5px nudge into every hard stop.
What is the difference between a color stop position and an interpolation hint?
A position attached to a COLOR (blue 40%) pins where that color is fully reached; a bare percentage between colors (red, 40%, blue) is a HINT that moves the transition's midpoint without pinning any color. Hints are how you bias a fade to linger near one end - dark sidebar edges, vignettes - without adding extra stops. Both accept lengths too: pinning a stop at 200px makes the gradient pixel-anchored, which survives element resizing differently than percentages do.
When is a conic gradient better than radial or linear?
Whenever the visual is angular rather than directional: pie and donut charts (hard stops around a circle), color wheels (full hue sweep), sunburst loaders, clock faces. Radial fits light emanating from a point (vignettes, spotlights, button domes); linear fits directional fades (sky, banners, edges). The conic family is also the newest of the three, so very old engines ignore it - worth a solid-color fallback declaration if you support them, which costs one extra line of CSS.
How do repeating gradients differ from tiling with background-repeat?
repeating-linear-gradient extends the stop pattern mathematically beyond the last stop, so one declaration covers any element size with even stripes - the pattern definition IS the gradient. Tiling a small gradient with background-repeat bakes the repeat into the box geometry: you size the tile (say 40px), the browser repeats the rendered image, and seams land exactly on tile boundaries. Repeating gradients handle uneven elements more cleanly; tiled gradients give precise pixel control and pair well with multiple background layers offset from each other.