What Are CSS Gradients?
CSS gradients are image values generated by the browser that display smooth transitions between two or more colors. Unlike raster images, gradients are calculated mathematically and rendered at the display's native resolution, making them perfectly sharp on any screen. They were introduced as part of CSS3 and have become an essential tool for web designers seeking to create visually rich interfaces without the performance overhead of image files. This gradient generator is part of our web development calculators suite.
Gradients are treated as images in CSS, which means they can be used anywhere images are accepted: background-image, border-image, list-style-image, and more. They can be layered with multiple backgrounds, combined with blend modes, and animated using CSS transitions and keyframes. The CSS specification defines three fundamental gradient types — linear, radial, and conic — each producing distinctly different visual effects through different mathematical interpolation approaches.
Linear Gradients in Depth
A linear gradient creates a color transition along a straight line, called the gradient line. The line's direction is specified by an angle (in degrees, where 0deg points upward and values increase clockwise) or by a directional keyword like to right or to bottom left. Colors are placed along this line at positions called color stops, and the browser smoothly interpolates between adjacent stops. The default direction is to bottom (180deg).
Color stops can specify explicit positions as percentages or lengths, or they can be evenly distributed automatically by the browser. When two stops share the same position, the transition between them becomes a hard edge rather than a smooth blend — a technique used to create striped patterns. The linear-gradient() function syntax is remarkably flexible: linear-gradient(135deg, #667eea 0%, #764ba2 100%) creates a diagonal gradient from blue-purple to deep purple. Adding intermediate stops enables complex multi-color transitions.
Angle Mathematics
Understanding the angle system is critical for precise control. In CSS gradient angles, 0deg points toward the top of the element, 90deg points right, 180deg points down, and 270deg points left. This differs from the standard mathematical convention where 0 degrees points right. The gradient line passes through the center of the element, and its length depends on both the angle and the element's dimensions, calculated to ensure the gradient fills the entire element without visible edges.
Radial Gradients Explained
Radial gradients emanate from a center point in concentric shapes. The CSS radial-gradient() function supports both circular and elliptical shapes, with control over the gradient's size and position. The default creates an elliptical gradient centered in the element that extends to the farthest corner. Size keywords include closest-side, farthest-side, closest-corner, and farthest-corner.
Radial gradients are particularly effective for creating spotlight effects, button highlights, and depth illusions. A subtle radial gradient from a slightly lighter center to the base color can make flat backgrounds feel three-dimensional. Combined with background-position and hover states, radial gradients can create dynamic interactive effects that follow cursor movement using CSS custom properties updated via JavaScript.
Conic Gradients and Creative Uses
Conic gradients, specified with conic-gradient(), create color transitions that sweep around a center point rather than radiating outward. The transition follows the angular direction, similar to looking down at a cone from above. They were the last gradient type to achieve broad browser support (Chrome 69, Firefox 83, Safari 12.1), but are now usable in production. Conic gradients accept an optional starting angle and position.
The most dramatic application of conic gradients is creating pie charts entirely in CSS. By using color stops at specific degree positions, you can create hard-edged segments: conic-gradient(red 0deg 120deg, blue 120deg 240deg, green 240deg 360deg) produces a three-segment pie chart. Conic gradients also excel at creating color wheels, decorative patterns, and gauge indicators. When the start and end colors match, the gradient creates a seamless sweep around the center.
Repeating Gradients and Patterns
CSS provides repeating variants of all three gradient types: repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient(). These functions tile the gradient pattern infinitely, creating stripes, concentric rings, and radial patterns. The repeat interval is defined by the color stop positions. For example, repeating-linear-gradient(45deg, #000 0px, #000 10px, #fff 10px, #fff 20px) creates diagonal stripes.
Combining multiple repeating gradients with different angles and blend modes can produce complex patterns reminiscent of textile designs, graph paper, or geometric art. These pure-CSS patterns load instantly, scale perfectly, and require zero network requests — making them superior to image-based patterns for performance-critical applications. Lea Verou's CSS3 Patterns Gallery demonstrates dozens of patterns achievable through gradient layering alone.
Gradient Text Effects
One of the most popular creative uses of CSS gradients is applying them to text. The technique involves three properties working together: set the gradient as a background-image, clip the background to the text shape with -webkit-background-clip: text (or background-clip: text), and make the text itself transparent with color: transparent. The result is text filled with the gradient pattern rather than a solid color.
While visually striking, gradient text requires careful accessibility consideration. Screen readers still access the text content normally, but users with low contrast sensitivity may struggle to read gradient text, especially where the gradient passes through low-contrast regions against the background. Always ensure sufficient contrast throughout the gradient range, and consider providing a solid-color fallback for older browsers that do not support background-clip.
Performance Considerations
CSS gradients are generally excellent for performance. They are computed and rasterized by the browser's rendering engine, often hardware-accelerated on the GPU. A gradient element avoids the network request, decoding, and memory overhead of an equivalent image file. For static backgrounds, gradients are virtually free from a rendering perspective. However, animating gradients (transitioning between different color values) can be expensive because the browser must recalculate and repaint the gradient on each frame.
For animated gradients, a more performant approach is to create a gradient larger than the container and animate background-position or transform, both of which can be GPU-accelerated without triggering repaint. Complex gradients with many color stops render slightly slower than simple two-color gradients, but the difference is negligible on modern hardware. Conic gradients with many stops can be more expensive than linear gradients on some rendering engines.
Browser Support History
CSS gradients have a long history of browser-specific implementations. WebKit browsers introduced the first gradient syntax in 2008 with -webkit-gradient(), a verbose function that differed significantly from the final standard. Mozilla followed with -moz-linear-gradient() using a different syntax. The W3C eventually standardized the syntax we use today, but the transition period required developers to include multiple prefixed declarations to achieve cross-browser support.
Today, unprefixed linear-gradient() and radial-gradient() are supported by all modern browsers with over 97% global coverage. conic-gradient() reached broad support with Firefox 83 in November 2020. For projects requiring support for older browsers, vendor prefixes remain useful — this tool can generate them automatically when the prefix toggle is enabled. The @supports feature query can be used to provide graceful fallback styles for browsers that lack gradient support.