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

CSS gradients let you create smooth colour transitions directly in code, without needing an image file — reducing HTTP requests, scaling perfectly at any resolution, and remaining fully editable through code rather than requiring a design tool round-trip for every adjustment. Despite being a core CSS feature for over a decade, many developers still reach for gradient images out of habit rather than understanding the syntax that would let them skip the image entirely.

Linear Gradients

A linear gradient transitions colour along a straight line at a specified angle. The basic syntax is linear-gradient(angle, color1, color2, ...). The angle is specified in degrees, where 0deg points upward (bottom to top), 90deg points rightward (left to right), and 180deg points downward — this can initially feel counterintuitive since it doesn't match standard mathematical angle convention (which starts at the right and moves counter-clockwise). Keyword directions like to right, to bottom left are also valid and often more readable than raw degree values for simple two-point gradients.

Color Stops: Beyond Two Colors

Gradients aren't limited to two colours — you can chain as many colour stops as needed, each optionally assigned a specific position percentage: linear-gradient(90deg, red 0%, yellow 50%, blue 100%). Without explicit percentages, colours distribute evenly across the gradient automatically. Precise percentage control lets you create hard colour transitions (by placing two colours at the same percentage position) or uneven distributions where one colour dominates more visual space than others.

Radial Gradients

Radial gradients radiate outward from a central point rather than along a straight line: radial-gradient(circle, color1, color2). By default, the gradient shape is an ellipse matching the aspect ratio of its container; explicitly specifying circle forces a perfect circle regardless of container proportions. The centre point can be repositioned using keywords or explicit coordinates: radial-gradient(circle at top left, ...) shifts the gradient's origin toward a corner rather than the default centre, useful for spotlight or glow effects that shouldn't appear perfectly centred.

Conic Gradients: The Newest Addition

Conic gradients, added to the CSS specification more recently than linear and radial, rotate colour around a centre point — similar to how a pie chart divides a circle into coloured sections. Syntax: conic-gradient(from angle, color1, color2, ...). Conic gradients are ideal for building pie charts with pure CSS (using hard colour stops at specific percentages), colour wheel visualisations, and decorative starburst or sunburst patterns that would otherwise require an SVG or image asset.

Repeating Gradients

Prefixing any gradient type with "repeating-" creates a pattern that tiles infinitely across the element — repeating-linear-gradient(45deg, black 0px, black 10px, white 10px, white 20px) produces a diagonal striped pattern. This technique is commonly used for creating striped backgrounds, warning patterns, and decorative textures without needing a separate background image file.

Multiple Backgrounds and Layering

CSS allows multiple background images (including gradients) to be layered on a single element, comma-separated, with the first listed gradient rendering on top. This enables combining a subtle radial gradient overlay with a base linear gradient, or layering a gradient over a background image entirely — a common technique for adding a readable text-contrast overlay on top of a photographic hero background image, without needing image editing software.

Browser Support and Prefixes

Linear and radial gradients have been universally supported since Chrome 26, Firefox 16, Safari 7, and Edge 12 — no prefixes are needed for any modern deployment target. Conic gradients are newer, supported in Chrome 69+, Firefox 83+, and Safari 12.1+ — effectively universal for any site not specifically targeting very old browser versions. For maximum legacy compatibility, some developers still include a -webkit- prefixed duplicate declaration, though this is largely unnecessary for modern projects.

Performance Considerations

CSS gradients are rendered by the GPU and are significantly more efficient than equivalent gradient image files — no additional HTTP request, no image decode overhead, and they scale to any element size without any loss of quality or additional file weight. One performance caveat: avoid animating a gradient's colour stops directly via CSS transitions, since the browser must recalculate and repaint the entire gradient on every animation frame, which is comparatively expensive. For animated gradient effects, animating background-position on a larger, static gradient, or transitioning opacity on a layered pseudo-element, achieves smoother results.

Building gradients by manually adjusting angle values and colour stops in code is slow and hard to visualise. Our CSS Gradient Generator provides a visual builder for linear, radial, and conic gradients with live preview, multiple colour stops, and instant CSS code output ready to copy into your project.

Gradients as Fallbacks and Placeholders

Gradients also serve a practical loading-state purpose — using a subtle gradient as a background-color fallback while a hero image loads prevents a jarring flash of blank white space, and some sites deliberately blur a low-resolution gradient approximation of an image as a placeholder before the full image loads in, a technique popularised by sites like Medium for perceived performance improvement.