CSS Gradients: A Complete Guide to Linear, Radial and Conic

CSS gradients let you create smooth color transitions without images. They are resolution-independent, reduce HTTP requests, and can be animated with CSS transitions. Every modern browser supports them, making gradients one of the most useful CSS features for creating visually rich designs.

Linear Gradients

A linear gradient transitions colors along a straight line. The simplest form takes two colors:

By default, the gradient flows top to bottom. You can change the direction with an angle or keyword:

Color Stops

Color stops define where each color appears in the gradient. Without explicit stops, colors are distributed evenly. You can set exact positions using percentages or lengths:

Setting two adjacent stops to the same position creates a hard color boundary instead of a smooth transition. This is useful for creating striped patterns.

Radial Gradients

Radial gradients radiate from a center point outward. The default shape is an ellipse that fills the element:

Radial gradients are perfect for spotlight effects, vignettes, and glowing orbs. Combining a radial gradient with transparent as the outer color creates soft light effects without images.

Conic Gradients

Conic gradients rotate colors around a center point, like a color wheel. They are useful for pie charts, clock faces, and decorative effects:

The from keyword sets the starting angle. To create a smooth loop, make the first and last colors match.

Layering Multiple Gradients

CSS allows multiple backgrounds, so you can stack gradients on top of each other. Use transparent in upper layers to let lower layers show through:

Performance Tips

• Gradients are cheaper than images. No network request, instant rendering, and they scale perfectly to any resolution.
• Avoid too many color stops. More than 5-6 stops in a single gradient rarely improves the visual result and increases rendering cost.
• Use hardware-accelerated properties. Animate opacity or transform on gradient elements instead of animating the gradient itself.
• Prefer CSS gradients over SVG gradients for simple backgrounds. SVG gradients add DOM nodes and are harder to maintain.

Common Use Cases

• Hero sections. A subtle gradient background adds depth without distracting from content.
• Text gradients. Combine background-clip: text with a gradient for colorful heading text.
• Borders. Use border-image or a pseudo-element with a gradient for gradient borders.
• Overlays. A semi-transparent gradient over images improves text readability.
• Loading skeletons. Animated gradients create shimmer effects for placeholder content.