CSS Gradients: The Complete Guide to Linear, Radial & Conic

CSS gradients let you create smooth transitions between two or more colours without using images. They render as backgrounds, which means they scale perfectly at any screen size and resolution, load instantly, and are fully controllable through code. This guide covers all three gradient types — linear, radial, and conic — with practical examples you can use in your projects today.

Linear Gradients

Linear gradients transition colours along a straight line. They're the most commonly used gradient type, appearing in everything from hero backgrounds to button hover states.

The first value is the direction — 135deg creates a diagonal from top-left to bottom-right. You can use degree values (0-360), or keywords like to right, to bottom left, etc. After the direction, list your colour stops separated by commas.

Controlling colour stop positions is where gradients get interesting. By default, colours are evenly spaced, but you can set specific positions using percentages or pixel values. This lets you create hard edges, weighted transitions, and more complex effects.

Tip: When two colour stops have the same position (like 50% and 50%), you get a hard edge instead of a smooth transition. This is useful for creating striped patterns and geometric designs.

Radial Gradients

Radial gradients radiate outward from a centre point. They're excellent for spotlight effects, subtle background textures, and creating depth.

The shape can be circle (perfectly round) or ellipse (default, stretches to fill the element). The at keyword sets the centre position — at center is the default, but you can use percentages, pixels, or keywords like at top left.

Radial gradients also accept sizing keywords: closest-side, farthest-side, closest-corner, and farthest-corner. These control how far the gradient extends, which matters when the centre isn't centred.

Conic Gradients

Conic gradients transition colours around a centre point, like a colour wheel. They were the last gradient type to gain full browser support and are now usable in all modern browsers.

Conic gradients are perfect for pie charts, colour wheels, and decorative elements. The from keyword sets the starting angle. To make a smooth loop, repeat the first colour as the last stop.

Practical use case — pie chart: Combine hard colour stops with conic gradients to create pure-CSS pie charts. Set each segment to start exactly where the previous one ends, and you get crisp wedges without any SVG or JavaScript.

Gradient Tips for Production

Avoid muddy midpoints

When transitioning between two vivid colours, the midpoint can appear grey or muddy. This happens because the browser interpolates in sRGB colour space by default. The fix is to add a third colour stop in the middle — usually a brighter or more saturated colour that bridges the two endpoints cleanly.

Use gradients for subtle texture

Not every gradient needs to be a dramatic colour sweep. Some of the most effective gradient use in modern design is barely visible — a subtle shift from one shade to a very slightly different shade adds depth and visual interest to otherwise flat sections. Try a 2-3% lightness difference for backgrounds.

Layer gradients with background-image

CSS supports multiple backgrounds, which means you can layer gradients. This opens up complex patterns, mesh-like effects, and rich visual textures without any images.

Performance

CSS gradients are rendered by the browser's compositor and are extremely fast — typically faster than loading an equivalent image. However, avoid animating gradient values directly (background transitions trigger expensive repaints). Instead, animate the opacity or position of a pseudo-element containing the gradient.

Browser Support

Linear and radial gradients have universal browser support (back to IE10 with vendor prefixes, though nobody needs those anymore). Conic gradients are supported in all modern browsers. For the rare case you need a fallback, always set a background-color before your background gradient declaration — the browser will use the solid colour if gradients aren't supported.