CSS Gradients Explained: linear-gradient vs radial-gradient vs conic-gradient

CSS gives you three distinct gradient functions — `linear-gradient()`, `radial-gradient()`, and `conic-gradient()` — and it's common to reach for whichever one happens to be muscle memory (usually linear) even when the actual visual effect wanted calls for a different shape entirely. All three produce a smooth transition between colors, but the geometry each one follows is fundamentally different, and picking the wrong one is one of the more common, easily avoidable reasons a gradient background or effect looks subtly wrong rather than intentional. This covers exactly how each gradient type works, real syntax examples, when to reach for which, and the mistakes that quietly break a gradient's appearance.

linear-gradient() — a straight-line transition

A linear gradient transitions color along a single straight line, at whatever angle you specify — the classic "top-left to bottom-right" or "left to right" background effect. The color transition is perpendicular to that line, meaning every point along a line drawn at 90° to the gradient's direction shares the exact same color. Syntax: `background: linear-gradient(135deg, #6366f1, #ec4899);` produces a diagonal transition from indigo to pink. You can specify direction with an angle in degrees, or with keywords like `to right`, `to bottom left`, and you can add any number of color stops with explicit positions: `linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%)`. Linear gradients are the right choice for backgrounds, buttons, banners, and any effect meant to read as a directional flow of color across a flat surface.

radial-gradient() — an expanding-circle (or ellipse) transition

A radial gradient transitions color outward from a center point, in expanding circles or ellipses, rather than along a straight line — think of a spotlight, a glow, or a subtle vignette effect. Syntax: `background: radial-gradient(circle, #fbbf24, #1e293b);` produces a glow that starts yellow at the center and fades to a dark navy toward the edges. You can control the shape (`circle` or `ellipse`, the default), the size (`closest-side`, `farthest-corner`, or an explicit size), and the center position (`at top left`, `at 30% 70%`, etc.). Radial gradients suit spotlight or glow effects, highlighting a specific focal point on a card or hero section, subtle vignettes that darken toward the edges of an image overlay, and circular UI elements like badges or icons that want a soft depth effect.

conic-gradient() — a rotation-around-a-point transition

A conic gradient transitions color around a center point as if sweeping a angle around a clock face, rather than along a line or outward in circles — picture a color wheel, a pie-chart segment, or a loading spinner. Syntax: `background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red);` produces a full color wheel. Conic gradients are the natural choice for color-picker wheels, pie-chart-style visualizations, circular progress indicators, and loading-spinner effects — anything where the visual metaphor is genuinely "sweeping around" rather than "radiating outward" or "flowing across." This is also the gradient type most often reached for too late, simply because it's newer and less muscle-memory than linear or radial — many pie-chart-style effects get built with layered radial tricks or SVG when a single conic-gradient line would do the job more simply.

Side-by-side comparison

• Transition shape: linear — along a straight line/angle. radial — outward in circles/ellipses from a center point. conic — rotating around a center point like a clock face.
• Classic use case: linear — backgrounds, buttons, banners. radial — spotlights, glows, vignettes. conic — color wheels, pie charts, progress rings, spinners.
• Direction control: linear — an angle in degrees or a `to <side>` keyword. radial — shape (circle/ellipse) and size keyword. conic — a starting angle with `from <deg>`.
• Multiple color stops: all three support any number of stops with explicit positions, using the same `color position%` syntax.
• Browser support: linear and radial gradients have been broadly supported for years; conic-gradient is newer and, while now well-supported in modern browsers, is worth double-checking against your project's specific minimum-supported-browser list if that list skews older.

Multi-stop gradients — going beyond two colors

All three gradient functions support any number of color stops, not just a simple two-color transition, and this is where a lot of visually rich gradient effects actually come from. Each stop can take an explicit position: `linear-gradient(90deg, #f43f5e 0%, #f97316 25%, #eab308 50%, #22c55e 75%, #3b82f6 100%)` produces a five-color rainbow-style sweep rather than a simple two-tone fade. Uneven spacing between stops is also valid and often intentional — clustering stops closer together in one section produces a sharper transition there, while spreading them out elsewhere produces a smoother, more gradual one in that section. This is a genuinely useful technique for a gradient that needs to hold a solid color for most of its length before transitioning quickly near one edge (a common pattern for gradient overlays on images, where the top needs to stay clear and only the bottom third needs to darken toward a caption).

Combining multiple gradients

CSS also allows layering multiple gradients (of any type, mixed) on the same element by comma-separating them in the `background` property, with the first one listed rendering on top. This is how a lot of more elaborate background effects are actually built — for instance, a subtle radial spotlight layered over a linear gradient base: `background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 60%), linear-gradient(135deg, #6366f1, #1e1b4b);`. Understanding that gradients can stack this way, rather than treating each element as limited to exactly one gradient function, opens up a lot of depth and texture that a single flat gradient alone can't achieve.

Gradient text — a popular effect built from a background trick

The visually striking "gradient text" effect seen on a lot of modern landing pages isn't a dedicated CSS text-color feature — it's a repurposing of the background-gradient system, clipped to the text itself. The pattern is: `background: linear-gradient(90deg, #6366f1, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent;` — this paints the gradient as the element's background, then clips that background so it's only visible through the shape of the text glyphs, while making the actual text color transparent so the gradient shows through instead of solid text. Because it reuses the same gradient functions covered above, any of linear, radial or conic can be applied to text this way, though linear is by far the most common choice for this specific effect, since a directional color sweep across a headline reads more naturally than a radial or conic transition would.

Animating a gradient

A gradient's color stops and angle are just CSS property values, which means they can be transitioned or animated like most other CSS values — but with an important caveat: directly animating the `background` shorthand or a gradient's internal color-stop positions doesn't interpolate smoothly in every browser the way animating a simple color or transform property does, because a gradient isn't a single scalar value under the hood. The common workaround is animating `background-position` on an oversized, multi-color gradient background (`background-size: 200% 200%`) to create a smooth-looking color shift or shimmer effect, rather than trying to animate the gradient's own color stops directly. CSS's newer `@property` syntax (part of the CSS Houdini set of APIs) offers a more direct way to register a custom property with a defined interpolation behavior, which can enable smoother direct gradient-angle or color animation in browsers that support it — worth knowing about if a project's target browsers support it, but not yet a universal drop-in replacement for the background-position technique.

Performance considerations

CSS gradients are rendered by the browser rather than downloaded as an image asset, which makes them essentially free in terms of network weight compared to a gradient baked into a PNG or JPEG background image — a real, if often overlooked, performance advantage worth remembering when choosing between a CSS gradient and an exported image for the same visual effect. Where gradients can cost something is repaint/render performance if they're animated on a very large element or repeated across many elements simultaneously, particularly a complex multi-stop or layered gradient recalculated on every frame of a scroll or resize event — in practice this is rarely a bottleneck for a typical background gradient, but it's worth profiling if a page feels janky specifically around a heavily animated gradient effect, rather than assuming gradients are always render-free regardless of complexity or frequency of recalculation.

Accessibility considerations for gradients

Beyond the text-contrast point already covered, a gradient used as a purely decorative background generally carries no specific accessibility requirement beyond the usual contrast checks for any text placed over it. Where it's worth extra care is a gradient used to convey actual information — for instance, a gradient-colored bar meant to represent a value range (low to high) — since color alone isn't a reliable way to convey information to users with color vision deficiencies; pairing it with a text label, a numeric value, or a pattern/texture cue alongside the gradient ensures the information isn't lost for someone who perceives the color transition differently or not at all. This mirrors the general accessibility principle of never relying on color as the sole carrier of meaning, applied specifically to a case (a gradient) where it's easy to forget that principle because the effect is primarily decorative most of the time.

Common mistakes with CSS gradients

• Reaching for linear-gradient by habit for an effect that's actually radial in concept (a glow, a spotlight, a vignette) — the visual result reads as subtly wrong even when the colors themselves are right, because the transition shape doesn't match the intended effect.
• Building a pie-chart or progress-ring effect with layered radial-gradient tricks or extra markup, when a single conic-gradient line does the same job more simply and with fewer moving parts.
• Forgetting that a repeating pattern needs the repeating- variant (`repeating-linear-gradient`, `repeating-radial-gradient`, `repeating-conic-gradient`) rather than the plain version, which only draws the gradient once and then stretches or clips it rather than tiling it.
• Insufficient contrast between a gradient's start/end colors and any text placed over it — checking contrast at the worst point of the gradient (not just the average) with a contrast checker matters, since text readability can fail at just one end of an otherwise nice-looking gradient.
• Using too many color stops with abrupt hue jumps, producing visible banding or a "muddy" transition instead of a clean sweep — fewer, well-chosen stops usually read better than many competing ones.

A quick decision guide

Ask what shape the color transition should actually follow. If it's a flowing sweep across a flat surface — a background, a button, a card — that's linear. If it's radiating outward from a specific point — a glow, a spotlight, a vignette around a focal element — that's radial. If it's rotating around a center point like a dial or a wheel — a color picker, a pie-chart segment, a circular progress indicator — that's conic. Picking based on the actual visual metaphor you're going for, rather than defaulting to whichever function is most familiar, is what keeps a gradient looking deliberate instead of merely applied.

Gradients vs solid colors and images — when to reach for which

A gradient isn't always the better choice over a flat, solid background color — it's worth reaching for one specifically when the design genuinely calls for depth, direction, or a focal effect, rather than adding one purely because it's visually trendy. A solid color communicates calm and clarity effectively for large content areas where a gradient would just add visual noise behind text. Where a gradient does add real value is in smaller accent areas — a button, a card header, a hero background — where a subtle color shift adds dimension without competing with foreground content for attention. Compared to a gradient baked into an exported image, a live CSS gradient stays crisp at any screen resolution or zoom level (since it's rendered, not rasterized), adapts instantly if a design system's color tokens change, and, as covered above, costs nothing in network weight — reasons it's generally the better technical choice whenever the visual effect itself doesn't require photographic detail an actual image would provide.

The short version: linear-gradient transitions along a straight line and suits flowing backgrounds and buttons; radial-gradient expands outward from a point and suits glows, spotlights and vignettes; conic-gradient sweeps around a point like a clock face and suits color wheels, pie charts and progress rings. All three support multiple color stops with explicit positions, and can be layered together on the same element for more elaborate effects than any single gradient function alone can produce.