The Complete Guide to CSS Gradients

What Are CSS Gradients?

A CSS gradient is a special type of image generated by the browser. Instead of loading a file from a server, gradients are created on the fly using mathematical functions that blend colors together. You can use them anywhere you'd use a background image: on divs, buttons, text, borders, and even pseudo-elements.

There are three types of CSS gradients, each producing a different visual effect. Linear gradients blend colors along a straight line. Radial gradients spread outward from a center point in a circular or elliptical shape. Conic gradients sweep colors around a center point like a color wheel.

Because gradients are rendered by the browser rather than downloaded as files, they're resolution-independent and scale perfectly on any screen — from a 4K monitor to a Retina mobile display. They also reduce HTTP requests, which can improve page load times compared to background images.

Linear Gradients

Linear gradients are the most commonly used gradient type. They create a smooth color transition along a straight line — by default from top to bottom.

Basic syntax

The simplest linear gradient requires just two colors. The browser blends them evenly from top to bottom:

Changing direction

You can control the gradient direction using angle values or keyword directions. An angle of 0deg points upward, 90deg points right, 180deg points down (the default), and 270deg points left. You can also use keywords like to right, to bottom left, etc.

Multi-stop linear gradients

You're not limited to two colors. Add as many color stops as you want to create complex, multi-toned blends. The browser distributes stops evenly unless you specify positions:

Hard color stops

When two adjacent color stops share the same position, you get a sharp edge instead of a smooth blend. This technique is useful for creating stripes and geometric patterns:

Radial Gradients

Radial gradients radiate outward from a central point, creating a circular or elliptical color blend. They're commonly used for spotlight effects, glowing buttons, and decorative backgrounds.

Basic radial syntax

Shape and size

Radial gradients accept a shape keyword — circle or ellipse (the default). You can also control how far the gradient extends using size keywords: closest-side, farthest-corner, or explicit pixel/percentage values.

Conic Gradients

Conic gradients transition colors around a center point, like slices of a pie chart. They were the last gradient type to gain widespread browser support, and they unlock some unique visual effects that aren't possible with linear or radial gradients.

Conic gradients are especially useful for creating pie charts, color wheels, progress rings, and decorative border effects. You can combine them with border-radius: 50% to create circular patterns.

Color Stops & Positioning

Color stops are the individual colors in a gradient and their positions along the gradient line. Understanding how to place them precisely gives you fine control over the blending behavior.

When you don't specify positions, colors are distributed evenly. The first color defaults to 0% and the last to 100%. But you can place any stop at a specific percentage or length value:

You can also use the two-value syntax to define both the start and end position of a single color, which is a shorthand for hard stops:

Color hints (midpoints)

A color hint is a plain percentage value placed between two color stops. It shifts the midpoint of the transition — the point where the blend is 50/50 between the two colors. This lets you create asymmetric fades:

Repeating Gradients

CSS provides repeating versions of all three gradient types: repeating-linear-gradient, repeating-radial-gradient, and repeating-conic-gradient. They tile the gradient pattern to fill the element.

Repeating gradients are excellent for creating striped backgrounds, progress indicators, and decorative patterns. The key is defining color stops with explicit length values (like pixels) rather than percentages — this way the pattern tiles at a fixed size regardless of the element's dimensions.

Gradient Text Effects

You can apply gradients directly to text using a combination of background-clip and transparent text color. This technique is widely used for headings and hero text:

This works because the gradient is applied as a background, then clipped to only show through the text shape. The text color is set to transparent so the gradient shows through. Note that you need the -webkit- prefixed versions for full cross-browser support.

Layering Multiple Gradients

Since gradients are treated as background images in CSS, you can stack multiple gradients on a single element using comma separation. This opens up possibilities for complex patterns and effects:

When layering gradients, use semi-transparent colors (via rgba or hsla) so the layers below remain visible. The first gradient in the list renders on top.

Performance Considerations

CSS gradients are generally very performant since they're rendered by the GPU. However, there are a few things to keep in mind for optimal performance.

Avoid animating gradient properties directly — this forces the browser to repaint on every frame. Instead, animate the element's transform or opacity while keeping the gradient static. If you need an animated gradient effect, animate background-position on an oversized gradient using background-size: 200% 200%.

Extremely complex gradients with many stops on large elements can cause slow paints on lower-end devices. Test on real hardware if you're stacking multiple gradients with many stops. In most cases, gradients with up to 5-6 stops perform identically to 2-stop gradients.

Real-World Examples

Frosted glass card background

Combining a subtle gradient with backdrop-filter creates the popular glassmorphism effect — a translucent surface with a blurred background.

Animated gradient button

This creates a button whose gradient shifts on hover — a smooth, eye-catching interaction that requires no JavaScript.

Gradient border

The double-background technique lets you create gradient borders on any element. The first background covers the padding area with a solid color, while the second gradient shows through the transparent border.

Browser Support

Linear and radial gradients have excellent support across all modern browsers. They've been supported without prefixes since approximately 2015. Conic gradients achieved full cross-browser support more recently, with all major browsers now supporting them. Repeating variants have the same support as their non-repeating counterparts.

For legacy browser support, you can provide a solid color fallback before the gradient declaration. Browsers that don't understand the gradient syntax will use the solid color instead: