What a CSS Gradient Is, and How to Choose the Right One

A CSS gradient is a smooth color transition the browser paints for you, with no image file to download, resize, or re-export. You write one function call, a few dozen characters in a stylesheet, and the browser renders it at whatever resolution the element needs: 320 pixels on a phone, 5K on a monitor. Gradients took over from the JPG backdrops most sites shipped five years ago for exactly that reason.

This is the generic page. Direction keywords, sizing rules and rotation math each get their own guide, because squeezing all three into one page leaves two half-answers instead of one good one. Pick the type first, then follow the link for its syntax.

Key Takeaways

• A gradient is a generated <image>, not a bitmap, so it scales cleanly and costs zero image bytes.
• Three functions cover almost every design: linear-gradient(), radial-gradient(), conic-gradient().
• Color stops set where the colors land; the travel rule sets the shape.
• Pick the type by the geometry you are drawing, then open the dedicated guide for its syntax.
• A gradient is not always the right tool. A flat fill, a mesh image, or a box-shadow often beats it.

What a CSS gradient actually is

A CSS gradient is a value, not an image file. In the CSS Images specification it belongs to the <image> type, the same family as url(). That is why it works anywhere an image works: background-image, border-image, mask-image, list-style-image and the content property all accept one. MDN's gradient reference lists the full set of functions and where each is valid.

The idea predates the web. A color gradient, also called a color ramp, is a progression that interpolates between defined colors across a range, and CSS adopted the concept as a first-class value type when the CSS Images Module Level 4 standardized how gradients are declared, positioned and interpolated. MDN's overview of CSS gradients is the gentler starting point if you want the concept before the syntax.

Underneath, every gradient is the same two parts: a list of color stops, plus a rule for how the color travels between them. Change the stops and you change the palette; change the travel rule and you change the shape. Picking a type is therefore a question about geometry.

The syntax every CSS gradient shares

All three functions take the same skeleton: a travel rule, an optional shape or angle, and a comma-separated list of color stops. Only the travel rule differs. Once you can read one gradient, you can read any of them.

A color stop is a color, optionally followed by a position. background: linear-gradient(to right, #ff7e5f, #feb47b) fades orange to peach from left to right, and because both stops are bare colors the browser puts the blend at the midpoint. Add a position and you place a color exactly: #feb47b 80% puts the peach near the far end and gives orange most of the run. Positions accept percentages and length units. A stop at 20% sits a fifth along the gradient line and flexes with the box; a stop at 40px is a fixed distance and stays put. Mixing both in one gradient is legal and hard to reason about, so pick one unit.

Two stops at the same position produce a hard edge instead of a fade. linear-gradient(to right, #000 50%, #fff 50%) splits an element cleanly in half, and that one trick is how stripes and hard color bands work. The CSS Images specification defines the interpolation rules, including what happens when stops are listed out of order and how color interpolation handles alpha channels.

Between two stops you can also drop a bare position with no color at all: linear-gradient(#000, 30%, #fff). That is an interpolation hint. It shifts the midpoint of the fade without adding a color, so the transition can feel weighted rather than mechanical.

CSS gradient or background image?

The short version: a gradient wins on bytes, resolution and editability, and loses on complexity. The full comparison is in CSS gradient vs background image, but the decision rarely takes long.

Use a gradient when the backdrop is a smooth transition, has to fill an unknown size, or changes with the design system. Use an image when you need photographic texture, noise grain, a mesh with more than two or three hues, or a picture whose composition is the point. Sharp geometry belongs in SVG, and a real photograph beats both. The place a gradient wins on pure merit is load time: it adds zero requests and zero image bytes, which matters for a backdrop sitting below the fold on a mobile page.

The three CSS gradient types at a glance

Function	Transition shape	Reach for it when	Key syntax	Full guide
linear-gradient()	Straight fade along an axis	Backdrops, buttons, overlays, dividers	Direction: to right, 45deg, 180deg	Linear gradient guide
radial-gradient()	Spreads outward from a centre point	Spotlights, glows, vignettes, rings	Shape: circle or ellipse, plus size keywords	Radial gradient guide
conic-gradient()	Rotational sweep around a centre	Pie charts, colour wheels, spinners	Angle and position, measured in degrees	Conic gradient guide

Every row links to the page that owns that syntax. Direction keywords and multi-stop patterns belong to the linear guide. closest-side and farthest-corner sizing belongs to the radial one. from and at positioning for a rotation belongs to the conic one. None of that fits in a table cell without turning this table into a worse version of the guide it points at.

In a sentence each: a linear gradient blends along a straight line you choose, which is why it carries most backdrops. A radial gradient expands from a point in a circle or ellipse, so the fade follows distance and reads as light or depth. A conic gradient rotates around a point, which is why pie charts and colour wheels were awkward to build before it existed. The mechanism differs; the color stop syntax is identical in all three.

How to choose the right CSS gradient type

Ask one question: what is the geometry of the thing you are drawing?

A color change that should read as movement across a surface, a header wash or a button fill or a hero backdrop, wants a straight axis. That is a linear gradient, and it covers most real work. The CSS linear gradient guide covers the direction keywords, the angle units and multi-stop patterns.

Light or depth emanating from a point asks for something else: a spotlight behind a product shot, a glow on a button, a vignette pulling the eye inward. That is distance from a centre, which is a radial gradient. and the CSS radial gradient guide covers circle versus ellipse, where to put the centre, and the sizing keywords that decide how far the fade reaches.

When you want a sweep instead, a pie chart, a colour wheel, a loading spinner, or a conic wash used as background texture, what you need is angle around a centre. That is a conic gradient, and the CSS conic gradient guide builds a working pie chart and a full colour wheel from scratch.

Two decisions come after the type. If the gradient has to fade to nothing so text can sit on top of it, that is a color with an alpha channel and it is covered in CSS gradient transparency. If you plan to animate it or stack several on one element, the paint cost changes the answer, and CSS gradient performance has the profiling method.

Color stops do most of the work

Choose the type in ten seconds. Then spend the rest of your time on the stops, because they are where a gradient looks designed rather than generated.

Two stops give you a fade. Three let you pin a color exactly in the middle: #6366f1 0%, #8b5cf6 50%, #ec4899 100% reads as indigo through violet to pink instead of a straight blend, because the midpoint is placed rather than averaged. More stops only help when each one changes the character of the fade. Five evenly spaced colors usually read as a mistake; three deliberately placed ones read as intentional.

Positions are where gradients go wrong. Omit them and colors distribute evenly, which is rarely what a designer drew. Percentage positions scale with the element, so the same gradient looks the same in a 200-pixel card and a 1600-pixel banner. That scaling is the property that makes gradients worth using over images at all.

If a gradient looks muddy rather than smooth, the cause is almost always two near-identical dark colors blending through a low-contrast midpoint. Fix the palette, not the type.

Where CSS gradients earn their keep

A gradient is an <image>, so every property that takes an image takes one. Three techniques account for most of what people build with them, and each has its own page.

• Gradient text — paint the gradient and clip it to the glyphs with background-clip: text, which needs a solid fallback color. CSS gradient text covers the prefix and the fallback.
• Gradient borders — border-image accepts a gradient directly, while border-color does not, so the common technique is a padded pseudo-element with a transparent border. CSS gradient border has both routes.
• Transparent fades — an alpha stop turns a gradient into an overlay that darkens a photo for legibility or blends one section into the next. CSS gradient transparency covers the alpha patterns.

For the clipping syntax itself, MDN's background-clip reference is the definitive one.

Four myths that cost you time

A CSS gradient is not always better than an image file

This is the one that wastes the most hours. A gradient cannot reproduce a photograph, a noise texture, or a mesh with eight hues and soft irregular blobs, and an attempt at one usually looks cheap. Sharp geometry belongs in SVG. And a large animated gradient can cost more paint than the image it replaced. Choose the image when the picture carries detail; choose the gradient when it carries a transition.

Browser support is not the deciding factor

Support stopped being the question years ago. Gradients have shipped unprefixed in every current browser, and caniuse's CSS gradients data shows it. The function worth checking on its own is conic-gradient(), which arrived later. See its compatibility table. Check support when your audience is old, not by reflex.

A CSS gradient is not a drop shadow

A gradient cannot produce a shadow. Shadows need directional offset, blur radius, and a color that differs from whatever sits behind them. box-shadow does all three in one declaration, and MDN's box-shadow reference covers the offset, spread and inset options. If you find yourself stacking semi-transparent gradients to fake depth, the layer count is the symptom and box-shadow is the fix.

More color stops do not mean a better gradient

Stops are cheap to write and count against paint on large surfaces. Adding a sixth color to a five-color fade rarely improves it, and interpolating between two very similar stops produces a band readers notice more than the gradient itself. Fewer, better-placed stops win every time. web.dev's rendering performance guidance explains why large painted areas cost what they cost, and its compositor-only properties guide covers which animated properties avoid repaint.

Related Tools & Further Reading

Each spoke below owns its own specific term.

• CSS linear gradient guide — direction keywords, angle units, multi-stop patterns
• CSS radial gradient guide — circle vs ellipse, centring, closest-side and farthest-corner
• CSS conic gradient guide — pie charts and colour wheels built from scratch
• CSS gradient text, CSS gradient border and CSS gradient transparency — the three techniques above, in depth
• CSS gradient vs background image — the full comparison
• CSS gradient performance — profiling paint cost before it bites

Tools: the CSS gradient generator builds any of these and copies the syntax, the color picker and palette generator picks stops that blend cleanly, and the CSS box-shadow generator handles the shadow half of the myths section.

For wider reading, see CSS-Tricks' gradient overview and the color gradient concept on Wikipedia.