CSS Gradient Guide — Linear, Radial & Conic
The definitive standard for modern CSS gradients. Master syntax, fallbacks, and cross-browser patterns.
Theory
How CSS Gradients Work
CSS gradients are generated images created entirely in stylesheet code. Unlike raster images, they scale infinitely, animate smoothly, and adapt to any container size — making them the backbone of modern UI design systems.
Three gradient functions are defined in the CSS Images Module Level 4: linear-gradient(), radial-gradient(), and conic-gradient(). Each accepts an angle or direction, a series of color stops, and optional interpolation hints. Browsers render them as immutable image objects, meaning they can be used anywhere a url() image is accepted — background-image, border-image, list-style-image, and even mask-image.
linear-gradient() interpolates colors along a straight axis. The default direction is to bottom (180deg). You can specify any angle in degrees, gradients, or compass directions like to top right. Color stops are defined as percentages or absolute lengths. Example: linear-gradient(135deg, #667eea 0%, #764ba2 100%) produces a diagonal purple-to-indigo wash commonly used in hero sections.
radial-gradient() radiates colors from a central focal point outward. You control the shape (circle or ellipse), size (closest-side, farthest-corner, or explicit lengths), and position (at center, at 30% 70%). Example: radial-gradient(ellipse at 20% 50%, #f093fb 0%, #f5576c 100%) creates a soft spotlight effect ideal for card backgrounds or profile headers.
conic-gradient() rotates colors around a fixed center point, producing pie-chart-like transitions. It is particularly useful for progress rings, color wheel pickers, and abstract art patterns. Example: conic-gradient(from 0deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b) generates a full-spectrum color wheel. Conic gradients are the newest of the three and require the most careful fallback strategy.
Examples
Gradient Syntax in Practice
Below are production-ready gradient patterns used by teams at Stripe, Vercel, and Linear. Each sample includes the exact CSS declaration and the visual result.
Linear — Soft Sky
linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)
A gentle blue wash popular in SaaS dashboards. The 135-degree angle avoids the harshness of a pure vertical gradient while maintaining readability for overlaid text.
Linear — Sunset Drift
linear-gradient(to right, #fa709a 0%, #fee140 100%)
A horizontal pink-to-gold transition used in call-to-action buttons. Using to right instead of an angle value improves readability for developers scanning the stylesheet.
Radial — Nebula Glow
radial-gradient(ellipse at 30% 20%, #a18cd1 0%, #fbc2eb 50%, #f6d5f7 100%)
An off-center elliptical gradient simulating ambient light. The 50% midpoint stop softens the transition, preventing the harsh banding that occurs with only two color stops on large surfaces.
Radial — Spotlight Card
radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 0%, transparent 60%)
A subtle top-down spotlight overlay. Combined with a semi-transparent base layer, this pattern creates depth on dark-mode cards without adding extra DOM elements.
Conic — Progress Ring
conic-gradient(#667eea 0% 72%, #e2e8f0 72% 100%)
A 72% completion indicator rendered purely in CSS. When paired with border-radius: 50% and a masked inner circle, this replaces SVG-based progress rings entirely.
Conic — Color Wheel
conic-gradient(from 0deg at 50% 50%, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b)
A full-spectrum wheel used in color picker interfaces. The repeating first and last stop ensures a seamless loop. The at 50% 50% anchor is optional but recommended for explicit positioning.
Browser Support
Cross-Browser Compatibility
Gradient support varies significantly across the three types. Understanding the compatibility landscape ensures your designs degrade gracefully on older browsers.
linear-gradient()
Chrome: 26+ (2013) • Firefox: 16+ (2012) • Safari: 6.1+ (2012) • Edge: 12+ (2015) • IE: 10+ (with -ms-linear-gradient prefix)
The most universally supported gradient type. For Internet Explorer 10 and 11, provide a solid background-color fallback as the first declaration. IE does not support to right syntax — use 90deg or left instead.
Best practice: Always declare a solid background-color before background-image. This handles the 0.1% of users on legacy browsers and ensures WCAG contrast requirements are never silently violated.
radial-gradient()
Chrome: 26+ (2013) • Firefox: 16+ (2012) • Safari: 6.1+ (2012) • Edge: 12+ (2015) • IE: 10+ (limited, with -ms-radial-gradient)
Radial gradients have strong modern support but IE10-11 renders them with noticeable artifacts on large surfaces. The ellipse keyword and explicit at positioning were not supported in IE — only basic circle and at center worked.
Best practice: When using radial gradients for subtle effects (overlays, glows), the fallback to a solid color is visually acceptable. For critical radial backgrounds, generate a PNG fallback using a tool like gradient.io and serve it via a @supports query.
conic-gradient()
Chrome: 69+ (2018) • Firefox: 83+ (2020) • Safari: 12.1+ (2019) • Edge: 79+ (2020) • IE: Not supported
Conic gradients are the newest and least universally supported. They are completely absent from Internet Explorer and older Android WebViews (Chrome for Android 69+ required, which shipped with Android 9 Pie).
Best practice: Use @supports (background: conic-gradient(red, blue)) to conditionally apply conic gradients. Provide a linear-gradient or solid-color fallback for browsers that lack support. Never use conic gradients for accessibility-critical information such as status indicators.
Pro tip for production: Combine @supports queries with feature detection in JavaScript for runtime validation. The CSS.supports('background', 'conic-gradient(red, blue)') method returns a boolean you can use to toggle gradient-heavy UI components. Teams at Shopify and GitHub use this pattern to serve simplified interfaces on legacy browsers while preserving full gradient experiences for modern users.
CSS Color Level 4 note: The color-mix() function, currently shipping in Chrome 119+ and Safari 16.2+, allows runtime color interpolation that can simplify gradient stop definitions. Example: linear-gradient(135deg, color-mix(in srgb, #667eea 60%, white) 0%, #667eea 100%). This is experimental and should not be used without a fallback.