CSS Gradients Explained
3 min readUpdated June 7, 2026
A CSS gradient is a smooth transition from one color to another, generated by the browser. The important and often surprising detail is that a gradient is an image, not a color — it is produced by functions like linear-gradient() that return a generated image you use wherever an image is expected, most commonly as a background. That is why you write background: linear-gradient(...) and not color: linear-gradient(...).
Because gradients are computed by the browser rather than downloaded, they scale to any size without losing quality and add nothing to your page weight. This guide covers the three gradient types — linear, radial, and conic — with real syntax and examples, plus practical tips for getting clean results.
Linear gradients
A linear gradient blends colors along a straight line. The syntax takes an optional direction followed by two or more color stops: linear-gradient(90deg, #ff0000 0%, #0000ff 100%) fills from red on the left to blue on the right. The 90deg sets the angle of the line; you can also use keywords like 'to right', 'to bottom', or 'to top left'. With no direction, the default is 'to bottom' (top to bottom).
Each color stop can include an optional position, given as a percentage or length, that tells the browser where that color should land along the line. linear-gradient(to right, red 0%, yellow 50%, red 100%) puts yellow exactly in the middle. Omit the positions and the browser spaces the stops evenly. You can chain as many stops as you like, and you can layer multiple gradients in one background property by separating them with commas.
Radial gradients
A radial gradient radiates outward from a center point in a circle or ellipse, instead of along a line. The syntax is radial-gradient(shape size at position, color stops). For example, radial-gradient(circle at center, #ffffff 0%, #000000 100%) produces a white center fading to black at the edges. The shape can be 'circle' or 'ellipse' (the default), and 'at position' moves the center — for instance 'at top left' or 'at 30% 40%'.
Size keywords such as closest-side, farthest-corner (the default), closest-corner, and farthest-side control how far the gradient extends before reaching its final color. Radial gradients are the natural choice for spotlights, glows, vignettes, and soft circular backgrounds where a linear blend would look flat.
Conic gradients
A conic gradient rotates colors around a center point, sweeping through angles like the hands of a clock rather than radiating outward. The syntax is conic-gradient(from angle at position, color stops), where color stops are placed by angle or percentage. conic-gradient(from 0deg, red, yellow, green, blue, red) sweeps through the spectrum in a full circle.
Conic gradients are how you build pie charts, color wheels, and pie-style progress rings in pure CSS. They are widely supported in modern browsers, but if you must support very old ones, provide a solid-color fallback first so the element still renders.
Practical tips
For smooth, natural blends, keep the two ends of a gradient close in hue and lightness; transitions between wildly different colors can pass through a muddy gray midpoint. You can also create hard stops — sharp lines with no blend — by giving two adjacent color stops the same position, as in linear-gradient(to right, red 50%, blue 50%), which makes a crisp two-color split useful for stripes and bars.
Gradients are most often used as background images, so reach for the background or background-image property and remember they tile and repeat like any image when smaller than their box. They are generally cheap to render, but very large animated gradients can tax the GPU, so avoid animating gradient color stops directly in hot paths; transform-based animation on a static gradient is smoother. Always include a plain background-color fallback for the rare browser that cannot render the gradient, and a contrasting text color so foreground content stays readable across the whole blend.
Frequently asked questions
Is a CSS gradient a color or an image?+
It is a generated image. Gradient functions like linear-gradient() return an image, which is why you use them with background or background-image, not the color property.
How do I set the direction of a linear gradient?+
Pass an angle such as 90deg, or a keyword like 'to right' or 'to bottom', as the first argument. For example linear-gradient(90deg, #ff0000 0%, #0000ff 100%) goes left to right. With no direction it defaults to top-to-bottom.
What are color stops?+
Color stops are the colors in a gradient, each with an optional position. linear-gradient(to right, red 0%, yellow 50%, red 100%) places yellow in the middle. Without positions, the browser spaces the stops evenly.
When should I use a radial gradient instead of linear?+
Use a radial gradient when you want color to radiate from a center point — for spotlights, glows, vignettes, and soft circular backgrounds. Linear gradients blend along a straight line instead.
How do I make a hard stop with no blend?+
Give two adjacent color stops the same position. For example linear-gradient(to right, red 50%, blue 50%) creates a crisp split with no transition, which is handy for stripes and bars.