A CSS Gradient Is Not an Image. Here Is What the Browser Is Actually Rendering.
A gradient in CSS is not a background image. It looks like one, behaves like one, and is specified in the background-image property like one. But the browser does not load a file, decompress it, or decode pixel data. It performs a mathematical calculation at render time and generates the pixel colors from scratch, recalculating every time the element changes size.
This distinction matters because it changes what you can do with a gradient compared to an image file. A CSS gradient has infinite resolution and scales perfectly to any container. It costs no network request. It responds instantly to container size changes. And its parameters can be controlled through CSS variables and modified by JavaScript without any image processing.
The first CSS gradient specification was introduced by the WebKit team in April 2008 in a blog post published on the WebKit developer blog. The original implementation used a -webkit-gradient() syntax that required explicit start and end points and was considerably more verbose than what developers use today. Mozilla implemented its own version with -moz-linear-gradient() in 2009, using a simplified syntax that was closer to the current standard. The two vendor-prefixed syntaxes were different enough that writing cross-browser gradients required maintaining separate declarations. The W3C Candidate Recommendation that standardized linear-gradient() was published in 2012, and the current syntax became the interoperable baseline that the vendor-prefixed versions eventually converged on. Older codebases still contain all three versions of gradient rules as a result.
How the Three Gradient Types Work
CSS defines three main gradient functions, each based on a different geometric model.
A linear gradient (linear-gradient()) interpolates colors along a straight line at a specified angle. The angle is measured clockwise from the top: 0deg is a top-to-bottom gradient, 90deg goes left to right, 180deg is bottom to top. The keywords "to bottom," "to right," and "to top left" are alternative direction syntax. The browser calculates the gradient line for the element's actual dimensions at layout time, extending from the starting edge to the ending edge, and places each color stop at the specified position along that line.
A radial gradient (radial-gradient()) interpolates outward from a center point through concentric ellipses or circles. The shape defaults to an ellipse that fits the element. You can specify an explicit circle shape, an explicit size, and a center position using the "at" keyword. A gradient that starts white at the center and fades to transparent is written as radial-gradient(circle at center, white, transparent), and the browser generates the appropriate fade for whatever size the element happens to be.
A conic gradient (conic-gradient()) interpolates around a center point at different angles, like a color wheel. Each degree around the center receives a different color. Unlike radial gradients, which vary by distance from center, conic gradients vary by angle. A color wheel itself is a conic gradient. Hard edges at specific angles create pie chart-like divisions. Conic gradients were implemented later than linear and radial, with Microsoft Edge being among the early implementers, and all major browsers now support them.
Color Stops and Hard Edges
Color stop placement is where most gradient generators save significant effort. Each color stop specifies a color and a position, expressed as a percentage of the gradient line or as an absolute length. The browser interpolates smoothly between consecutive stops.
Two stops of the same color at adjacent positions produce a flat section. Two stops of different colors at the same position create a hard edge: an abrupt transition with no gradient. This is how CSS gradients produce striped patterns without any image files. A gradient like linear-gradient(to right, red 50%, blue 50%) produces a red left half and a blue right half with a sharp boundary, not a fade.
The midpoint between two stops can be controlled explicitly with a hint, a length or percentage positioned between the two stops that pulls the midpoint transition toward one side or the other. Without a hint, the interpolation is evenly distributed. A hint at 25% between two stops shifts the midpoint so that the first color occupies a smaller proportion of the transition.
Repeating gradient functions (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()) tile the gradient pattern from the last color stop position back to the beginning, filling the entire element. They create striped, ringed, or sectored patterns from a single color stop sequence.
Color Interpolation and the Gray Midpoint Problem
Color interpolation is the area where gradients have improved most significantly in the past few years. The original gradient specification interpolated colors in the sRGB color space, which is the standard color space for web content. The problem with sRGB interpolation is that it is not perceptually uniform: equal numerical changes in the color values do not correspond to equal changes in perceived brightness or hue.
The practical consequence is the "gray midpoint" problem. When you create a gradient between two colors that are opposite each other in hue, such as blue and yellow, the sRGB midpoint passes through an area of neutral gray or brown because those hues mix additively to produce a desaturated result. The gradient looks muddy at the transition.
CSS Color Level 4, which browsers began implementing starting in 2023, allows gradients to specify the color interpolation space using the "in" keyword. The syntax looks like this: linear-gradient(in oklch, blue, yellow). OKLch is a perceptually uniform color space developed by Björn Ottosson and finalized in the OKLab specification. Its name stands for Oklab Lightness, Chroma, and Hue. In OKLch, equal numerical changes in lightness, chroma, and hue produce equal perceived changes. Interpolating a gradient in OKLch produces transitions where the midpoint brightness matches the endpoints and the hue transitions naturally around the color wheel rather than passing through gray.
Tailwind CSS v4, released in 2025, adopted OKLch interpolation as the default for all gradient utilities, recognizing that the perceptual improvement was significant enough to justify the change. The sRGB default that the CSS gradient spec originally shipped with is still the fallback for browsers that have not implemented Color Level 4, but for supported browsers, OKLch interpolation produces visibly better results.
Direction and Position Syntax
The angle system in linear-gradient() uses CSS angle units (deg, rad, turn) measured clockwise from 12 o'clock, which is the same direction convention as CSS transforms but different from the mathematical convention of measuring counter-clockwise from the positive x-axis. A diagonal gradient running from the bottom-left corner to the top-right corner is specified as linear-gradient(45deg, ...), not as the geometric angle of the actual diagonal of the element, because the browser normalizes the gradient line to the element's dimensions.
The keyword syntax (to bottom, to top right) is often more readable than explicit angles. "to bottom right" specifies a gradient that runs diagonally to the bottom-right corner of the element regardless of its aspect ratio. The browser calculates the actual angle that achieves this for the specific element dimensions. This is different from 135deg, which is a fixed angle that may or may not point to the corner depending on the element's shape.
Radial gradient positioning uses the "at" keyword followed by a position value: radial-gradient(circle at top left, ...) centers the gradient at the element's top-left corner. This uses the same position syntax as the object-position and background-position properties, including keyword values (top, center, bottom, left, right) and percentage values.
Conclusion
ToolHQ's CSS gradient generator lets you build linear and radial gradients visually with a live preview. The tool outputs the complete CSS property value ready to paste into a stylesheet. For gradients with more than two color stops, or gradients that need to work at multiple sizes, visual generation is substantially faster than manual calculation of stop positions.
CSS gradients replaced many background image files in the transition to modern web design, not because they look better, but because they are mathematically generated images that cost nothing to transfer and nothing to decode. The browser renders them from a formula, and the formula can be parameterized in ways a static image cannot.
Frequently Asked Questions
Why is a CSS gradient faster than a background image?
CSS gradients are calculated by the browser at render time. They require no network request, no file download, and no image decoding. They also scale perfectly to any container size.
What is a conic gradient in CSS?
A conic gradient interpolates colors around a center point at different angles, like a color wheel. Each angle from the center gets a different color, unlike radial gradients which vary by distance.
Why do CSS gradients look muddy in the middle?
The default sRGB interpolation space produces desaturated midpoints between some color combinations. Using OKLch interpolation (CSS Color Level 4) produces perceptually uniform transitions without the gray midpoint.