CSS Gradients Explained: Linear, Radial, and How to Use Them

A CSS gradient is a smooth transition between two or more colors, drawn by the browser as an image with no file to download. You declare it in a single property value, and the browser paints every pixel of the fade at render time. Per MDN's gradient reference, a gradient is a <gradient> data type, a special kind of <image> that CSS generates on the fly.

That one detail explains most of what makes gradients useful. They scale to any size without blurring, they weigh nothing in your asset budget, and they change with a line of code instead of a trip back to a design tool. This guide covers the three gradient types, the syntax that drives them, and when each one earns its place.

Key Takeaways

• A CSS gradient is a browser-generated <image>, so it scales cleanly and ships zero image files (MDN).
• Three functions cover almost every case: linear-gradient(), radial-gradient(), and conic-gradient().
• Color stops set where each color lands; direction or shape sets how the fade travels.
• Gradients have near-universal browser support today (caniuse).

What Is a CSS Gradient?

A CSS gradient is a color transition the browser computes and paints, not a bitmap you supply. It belongs to the <image> category in CSS, which is why it works anywhere an image works: background-image, border-image, mask-image, and the content property all accept one. MDN's gradient documentation lists the full set of functions and where each is valid.

The underlying idea is old. A color gradient, also called a color ramp, is a progression that interpolates between defined colors across a spatial range. CSS took that concept and made it a first-class value type, standardized in the CSS Images Module Level 4, which defines how gradients are declared, positioned, and interpolated.

Every gradient shares the same two ingredients: a set of color stops and a rule for how the color travels between them. A color stop pairs a color with a position, and the browser interpolates the pixels in between. Change the stops and you change the palette; change the travel rule and you change the shape.

CSS gives you three travel rules, and each is its own function. Linear gradients run along a straight axis, radial gradients spread outward from a center point, and conic gradients sweep around a center like a clock hand. Everything else is a variation on those three, including the repeating variants that tile a gradient into stripes.

Why Use CSS Gradients?

Gradients replace image files for one of the most common design jobs: a colored backdrop that is not a flat fill. A JPG or PNG background is fixed in size, adds a network request, and blurs when stretched. A gradient does none of that, because the browser redraws it at whatever resolution the element needs.

Scalability is the headline benefit. Because a gradient is generated, not sampled, it stays razor sharp on a 320-pixel phone and a 5K monitor alike, with no @2x asset and no compression artifacts. CSS-Tricks' gradient overview walks through how a single declaration adapts across sizes.

The performance case is just as strong for static use. Zero image bytes means zero extra HTTP requests for the backdrop, and a gradient string is a few dozen characters in your stylesheet. Editing is instant: swap a hex value and the whole fade updates, with no re-export. The tradeoff is paint cost on very large or animated surfaces, which the gradient performance guide covers in detail.

Support is no longer a concern. Gradients have shipped in every major browser for over a decade, and caniuse's gradient table shows near-universal coverage, with only legacy prefixes needed for very old versions. You can write the unprefixed syntax in production today.

The Three Gradient Types

CSS ships three gradient functions, and choosing the right one is mostly a question of shape. Get the shape right and the syntax follows.

Function	Shape of transition	Best for
linear-gradient()	Straight line along an axis	Backgrounds, buttons, overlays
radial-gradient()	Outward from a center point	Spotlights, glows, vignettes
conic-gradient()	Rotational sweep around a center	Pie charts, color wheels, spinners

Linear Gradients

A linear gradient blends colors along a straight line. You set a direction, an angle like 45deg or a keyword like to right, and then list the color stops. background: linear-gradient(to right, #ff7e5f, #feb47b) fades orange to peach from left to right. MDN's linear-gradient page documents the direction keywords and angle units.

Linear is the workhorse. Hero backdrops, button fills, card overlays, and subtle section dividers are nearly all linear gradients. The complete linear gradient guide covers angles, multiple stops, and the repeating-linear-gradient() variant for stripes and patterns.

Radial Gradients

A radial gradient spreads outward from a center point in a circle or ellipse. background: radial-gradient(circle, #fff, #000) fades white at the center to black at the edges. You control the shape, the size, and where the center sits, which makes radial the choice for spotlights, glows, and vignettes. MDN's radial-gradient reference details the shape and size keywords.

The mental model is a ripple, not a line. Because the fade follows distance from a point, radial gradients read as depth and light. The radial gradient guide breaks down circle versus ellipse, positioning the center, and sizing keywords like closest-side and farthest-corner.

Conic Gradients

A conic gradient rotates colors around a center point, so the transition sweeps by angle instead of distance. That single difference makes it the tool for pie charts, color wheels, and loading spinners, effects that were awkward before it existed. MDN's conic-gradient documentation shows the angle and position syntax.

Conic is the newest of the three and the least used, mostly because fewer designs call for a rotational sweep. When you need one, nothing else comes close. The conic gradient guide builds a working pie chart and a full color wheel from scratch.

How Do You Write a CSS Gradient?

The fastest way to build a gradient is a visual generator that writes the syntax for you. ToolSura's CSS gradient generator lets you pick colors, drag stops, and set the angle, then copies production-ready code. When you want to write one by hand, the steps are short.

1. Pick the type: linear-gradient() for a straight fade, radial-gradient() for a circular one, conic-gradient() for a rotational sweep.
2. Set the direction or shape first: an angle or keyword for linear, a shape and position for radial or conic.
3. List two or more color stops, each a color optionally followed by a position like 0% or 20px.
4. Assign the whole function to an image property, usually background or background-image.
5. Preview across sizes, then adjust stop positions until the transition lands where you want it.

A minimal example ties it together: background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%) paints an indigo-to-pink diagonal. Add a third stop, #8b5cf6 50%, and the fade passes through violet at the midpoint. Every gradient grows from that pattern, no matter how many colors you stack on top.

Color Stops Control Everything

Color stops are where a gradient stops being a two-color fade and becomes a design. A stop is a color plus an optional position, and the browser interpolates smoothly between adjacent stops. Omit the positions and the colors distribute evenly; add them and you place each color exactly where you want it.

Two stops at the same position create a hard line instead of a fade, which is how you build stripes and color bands: linear-gradient(to right, #000 50%, #fff 50%) splits the box cleanly in half. The CSS Images specification defines this interpolation behavior precisely, including how the browser handles stops listed out of order.

Direction and stops work together. In a linear gradient the angle sets the axis and the stops set the milestones along it; in a radial gradient the shape sets the path and the stops set the rings. Reading a gradient as 'axis plus milestones' makes almost any example legible at a glance, even a dense one with five or six colors.

Positions accept both percentages and length units. A stop at 20% sits a fifth of the way along the gradient line, while a stop at 40px sits a fixed distance from the start regardless of element size. Percentages flex with the box; pixels stay put. Mixing them is legal but unpredictable, so pick one unit per gradient unless you have a reason not to.

The CSS Images Module also defines interpolation hints, a bare position between two stops that shifts the midpoint of the fade without adding a color. Writing linear-gradient(#000, 30%, #fff) pushes the halfway blend toward the dark end, so the transition feels weighted rather than linear. It is the difference between a fade that looks mechanical and one that looks tuned.

Stacking and Repeating Gradients

A single element can hold more than one gradient. The image properties accept a comma-separated list, and the browser stacks them front to back, first listed on top. When the upper gradients use transparency, the lower ones show through, which is how layered mesh backgrounds and subtle texture effects are built from pure CSS.

A practical stack pairs a transparent tint over a solid base: background: linear-gradient(rgba(0,0,0,0.4), transparent), linear-gradient(to right, #6366f1, #ec4899) darkens the top of a pink-indigo fade so overlaid text stays readable. Each layer is an independent gradient with its own stops, and reordering the list reorders the stack.

The repeating variants tile a gradient instead of stretching it. repeating-linear-gradient() and repeating-radial-gradient() take the same arguments as their base functions but loop the stop pattern across the whole box, which turns a two-stop gradient into stripes, checks, or concentric rings. The pattern repeats as soon as the last stop position is reached, so the spacing between stops sets the stripe width. Repeating gradients are the CSS way to draw patterns without an image file.

Gradients Do More Than Backgrounds

A gradient is an <image>, so it works in every property that takes one, and that opens techniques past the plain backdrop. Fading a gradient to transparent, painting text with one, and faking a gradient border are the three most common.

Transparency turns a gradient into an overlay. Using rgba() or a color with an alpha channel, you can fade an image to readable darkness or blend two sections together. The gradient transparency guide covers alpha stops and the common 'fade to transparent' overlay pattern.

Gradient text is a background-clip trick: paint the gradient, then clip it to the shape of the letters with background-clip: text. The gradient text guide walks through the -webkit- prefix and the fallback color every implementation needs. Gradient borders take a similar workaround, since border-color will not accept a gradient directly, detailed in the gradient border guide.

Browser Support and Performance

Modern gradient syntax is safe to ship unprefixed. Caniuse's gradient data shows support across every current browser, with vendor prefixes needed only for versions most sites no longer target. Conic gradients arrived later than linear and radial, so check the specific function if you support older browsers.

Performance is usually a non-issue and occasionally a real one. A static gradient on a normal element paints once and costs nothing measurable. A gradient that animates, covers a huge surface, or stacks many layers can tax the paint step, and the gradient performance guide shows how to profile and fix it. As a rule, gradients beat background images on load time and lose to solid colors on paint time.

For color work that feeds a gradient, a good palette tool saves iterations. ToolSura's color picker and palette generator helps you choose stops that transition cleanly, and the CSS box-shadow generator pairs well when you are styling the same element.

Related Tools & Further Reading

Each gradient type and technique has a dedicated guide below, and the generator turns any of them into copy-paste code. Start with the type you need, then reach for the technique posts when a background is not enough.

• CSS Linear Gradient: Syntax, Examples, and Best Practices
• CSS Radial Gradient: Complete Guide with Examples
• CSS Conic Gradient: How to Create Pie Charts and Color Wheels
• CSS Gradient Transparency: Alpha Channels and Fade Effects
• CSS Gradient Text: How to Create Colorful Text Effects
• CSS Gradient Border: Workarounds and Modern Solutions
• CSS Gradient Performance: Browser Rendering and Optimization
• Tools: CSS gradient generator, color picker and palette generator, and CSS box-shadow generator.