What Is a CSS Gradient?

CSS's linear-gradient() function smoothly transitions between two or more color stops along a specified direction. It powers backgrounds, buttons, headers, and many other UI elements. radial-gradient() produces a radial transition that emanates from a center point outward.

Color Stops and Positions

Each color stop accepts a color and a percentage position. For example, linear-gradient(90deg, #ff0000 0%, #0000ff 100%) fades from red on the left to blue on the right. Adding more stops lets you build more elaborate gradients.

Practical Limits and What This Tool Cannot Do

CSS gradients are vector-based, so they stay crisp at any resolution, but rendering can vary slightly between browsers. In particular, conic-gradient may have incomplete support in older Safari versions. CSS gradients are also strictly for screen rendering — they do not match CMYK or spot-color gradients used in print, which require dedicated tools such as Illustrator or InDesign.

Trade-offs to Keep in Mind

Complex gradients with many color stops grow your CSS file. Stacking multiple background layers for noise effects or combining gradients with SVG filters can also impose non-trivial GPU rendering cost on mobile devices. Color banding depends on display bit depth (8-bit vs 10-bit) and is most visible in dark ranges. Native CSS still has no built-in dithering.

Real-World Q&A

Q: The middle of my gradient looks muddy. — In sRGB, gradients between complementary colors tend to pass through gray. Using CSS color-interpolation in the oklch space yields a more perceptually uniform transition (check browser support). Q: I need IE support. — IE11 supports only the basic linear-gradient syntax — repeating-gradient and conic-gradient are not supported. Use a filter: progid:DXImageTransform fallback or a background image instead.

Trends in CSS Gradients

Around 2012, when CSS3 was being finalized, simple two-color gradients dominated. In the 2020s, mesh gradients (free-form gradients with multiple control points) and animated gradients have become mainstream. Animated gradients via CSS Houdini @property registration and perceptually accurate gradients in oklch() are the next-generation trends to watch. "Glassmorphism," combining SVG feMorphology with CSS backdrop-filter, also remains popular.