CSS Gradient Guide: Linear vs Radial Explained

Early in my career, I treated gradients as a single CSS feature. I would Google "css gradient generator," copy the output, and paste it into my stylesheet without really understanding what was happening. Then a client asked me to animate a gradient shift on hover, and I realized I did not actually know how gradients worked under the hood. I spent an entire afternoon reading the spec, and what I learned has saved me countless hours since.

Linear Gradients: The Workhorse

A linear gradient transitions colors along a straight line. You define a direction and a set of color stops, and the browser fills the space by blending between them. It is the most common type of gradient and the one you will use for 80% of your projects.

The syntax looks like this:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

The angle (135deg) determines the direction. Zero degrees points upward, 90deg points right, and angles in between create diagonal transitions. You can also use keywords like "to right" or "to bottom left" if you prefer.

Color stops define where each color appears. In the example above, #667eea starts at 0% and #764ba2 ends at 100%. You can add more stops in between. I often use three or four stops for hero backgrounds to create more visual depth than a simple two-color fade.

You can experiment with different angles and color combinations using our gradient generator. It outputs the exact CSS you need and lets you preview the result in real time.

Radial Gradients: Depth and Focus

A radial gradient spreads outward from a center point. Instead of a straight line, the colors blend in concentric circles. This creates a completely different visual effect — one that feels more atmospheric and three-dimensional.

The syntax is similar but with different parameters:

background: radial-gradient(circle at 30% 30%, #ff9a9e 0%, #fecfef 50%, #fff 100%);

The "circle at 30% 30%" part sets the center point. You can move the focal point anywhere within the element, which is useful for creating lighting effects. I often use radial gradients for card backgrounds where I want a soft glow emanating from a corner.

The shape can be "circle" or "ellipse." Circle maintains equal proportions. Ellipse stretches to fit the container shape. For square containers, the difference is invisible. For wide rectangles, ellipse creates an oval gradient that matches the aspect ratio.

When to Use Which

I use linear gradients for anything that needs structure. Hero sections with a directional energy. Buttons that need a sleek sheen. Headers that transition from one brand color to another. The straight line creates movement and direction, which guides the eye.

I use radial gradients for anything that needs atmosphere. A soft glow behind a product image. A spotlight effect on a dark background. A gentle color wash that feels ambient rather than directional. Radial gradients feel less aggressive and more organic.

A practical rule I follow: if the gradient is the background for text, linear is usually safer because the color shift is predictable. Radial gradients can create hotspots where contrast suddenly drops, making text harder to read in specific regions.

Multi-Color and Repeating Gradients

Both linear and radial gradients support multiple color stops. The browser blends between each adjacent pair. With five or six colors, you can create complex effects that look like mesh gradients without needing images.

Repeating gradients take the concept further by tiling the gradient pattern. A repeating linear gradient can create striped backgrounds. A repeating radial gradient can create concentric rings. These are powerful but easy to overuse. I reserve them for subtle texture backgrounds, never for primary design elements.

If you want to push multi-color gradients further, our multi-color gradient generator lets you add up to eight colors with adjustable angles. It is the fastest way to find a complex gradient that actually works without trial and error in DevTools.

Performance Considerations

Gradients rendered by the browser are generally fast. They do not require HTTP requests like background images. They scale to any size without losing quality. And they work at any pixel density.

The one gotcha is animating gradients. Changing the background property triggers a repaint on every frame, which can cause jank on lower-end devices. If you need an animated gradient, use a pseudo-element with a large background-size and animate the background-position instead. This is much cheaper for the browser to compute.

For truly smooth animated gradients, try our color gradient animator. It generates the optimized CSS with background-size and keyframe animation preconfigured so you do not have to worry about the performance details.