CSS Gradients — The Complete Guide (Linear, Radial, Conic)

Linear gradients create a smooth transition between colors along a straight line. They're the most commonly used gradient type in web design — backgrounds, buttons, overlays, and decorative elements all benefit from linear gradients.

The basic syntax: background: linear-gradient(direction, color1, color2, ...)

The direction can be specified as an angle (45deg, 180deg) or a keyword (to right, to bottom left). Default is to bottom (top to bottom, or 180deg).

Color stops let you control where each color begins and ends:

• linear-gradient(to right, red, blue) — Even transition from red to blue.
• linear-gradient(to right, red 30%, blue 70%) — Red solid until 30%, transition in the middle, blue solid from 70%.
• linear-gradient(to right, red 0% 50%, blue 50% 100%) — Hard edge at 50%, no transition. This creates a sharp split.

Multiple color stops create more complex gradients: linear-gradient(to right, #667eea, #764ba2, #f093fb) produces a smooth purple-to-pink transition that's popular in modern web design. The browser calculates the transitions between each pair automatically.

A pro tip: add a slight gradient to solid-colored buttons (linear-gradient(to bottom, #4F46E5, #4338CA)) for a subtle 3D effect that makes them feel more clickable without looking skeuomorphic.

Radial gradients radiate outward from a center point, creating circular or elliptical transitions. They're excellent for spotlights, glowing effects, and focal point backgrounds.

The basic syntax: background: radial-gradient(shape size at position, color1, color2, ...)

Shape can be circle or ellipse (default). A circle always has equal dimensions; an ellipse stretches to fill its container.

Size keywords:

• closest-side — The gradient reaches the closest edge of the container.
• farthest-side — Reaches the farthest edge.
• closest-corner — Reaches the closest corner.
• farthest-corner — Reaches the farthest corner (the default).

Position defaults to center but can be set to any value: at top left, at 30% 70%, at 100px 200px.

Practical use case: a subtle spotlight effect on a dark background: radial-gradient(ellipse at center, #1a1a2e, #16213e, #0f3460). This creates a slightly lighter center that draws the eye to the content, a technique used by many dark-mode designs.

Conic gradients sweep around a center point like a color wheel, rather than radiating outward. They're newer than linear and radial gradients but supported in all modern browsers.

The basic syntax: background: conic-gradient(from angle at position, color1, color2, ...)

Conic gradients are uniquely suited for:

• Color wheels — conic-gradient(red, yellow, lime, aqua, blue, magenta, red) creates a full color wheel. Notice the last color matches the first for a seamless loop.
• Pie charts — Use hard color stops: conic-gradient(#4F46E5 0% 35%, #06B6D4 35% 65%, #E5E7EB 65% 100%) creates a three-segment pie chart purely in CSS.
• Starburst/sunburst effects — conic-gradient(from 0deg, #fff 0deg, #000 2deg, #fff 4deg, #000 6deg, ...) creates a repeating ray pattern.

The from keyword sets the starting angle (default is the top, 0deg/12 o'clock position). The at keyword sets the center point, just like radial gradients.

Conic gradients are less commonly used than linear and radial, but they enable visual effects that would otherwise require SVG or canvas. They're particularly useful for data visualization elements like progress rings and donut charts.

CSS allows multiple backgrounds on a single element, which means you can layer gradients to create complex effects:

background: linear-gradient(to right, rgba(0,0,0,0.3), transparent), radial-gradient(circle at 30% 50%, #4F46E5, transparent 60%), linear-gradient(to bottom, #0f172a, #1e293b);

This layers a horizontal shadow, a radial spotlight, and a vertical base gradient. Each layer is drawn on top of the previous one, so order matters — the first gradient listed is on top.

Repeating gradients tile the gradient pattern across the element:

• repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #fff 10px, #fff 20px) — Diagonal stripes.
• repeating-radial-gradient(circle, #000 0px, #000 5px, #333 5px, #333 10px) — Concentric rings.

Gradient text: Apply a gradient to text by setting the gradient as a background and using -webkit-background-clip: text and color: transparent. This creates the gradient text effect popular in modern landing pages.

Animated gradients: You can't directly animate CSS gradient colors (they don't interpolate smoothly). The workaround is to create an oversized gradient and animate background-position, creating the illusion of moving colors.

CSS gradients have excellent browser support in 2026:

• Linear gradients: Supported everywhere, including IE 10+. No prefixes needed.
• Radial gradients: Supported everywhere, including IE 10+. No prefixes needed.
• Conic gradients: Supported in all modern browsers (Chrome, Firefox, Safari, Edge). Not supported in IE, which is end-of-life and irrelevant for new projects.
• Repeating variants: Same support as their non-repeating counterparts.

Performance considerations: Gradients are rendered by the GPU and are extremely efficient. They're faster than equivalent image backgrounds because there's no file to download, decode, and composite. Complex gradients with many color stops are still fast — the GPU handles them natively.

One performance caveat: animating gradient properties (angle, color stops) can cause layout recalculations on some browsers. If you need animated gradients, animate background-position or transform instead, which stay on the GPU compositing layer.

For critical backgrounds, test on mobile devices. Not because of compatibility issues, but because some complex layered gradients with transparency can look different on OLED vs LCD screens due to black level differences.