CSS gradients have come a long way. What started as a simple linear color transition is now a full toolkit for creating backgrounds, borders, text effects, and even illustrations — all without a single image file.

Why Use CSS Gradients?

Gradients render at any resolution. They are resolution-independent, load instantly (no HTTP request), and can be animated with CSS transitions. A gradient background is always sharper than a JPEG and always smaller than a PNG.

Linear Gradients

The most common type. A linear gradient transitions colors along a straight line.

``css

background: linear-gradient(135deg, #a78bfa, #22d3ee);

`

The angle controls direction. 0deg goes bottom to top, 90deg goes left to right, and 135deg goes top-left to bottom-right. You can also use keywords like to right, to bottom left.

Radial Gradients

Radial gradients radiate from a center point outward. They create circular or elliptical color transitions.

`css

background: radial-gradient(circle at center, #a78bfa, #22d3ee);

`

You can position the center with at top left, at 20% 80%, or any position value. The shape can be circle or ellipse.

Conic Gradients

Conic gradients are the newest addition. Colors transition around a center point, like a pie chart or color wheel.

`css

background: conic-gradient(from 90deg, #a78bfa, #22d3ee, #a78bfa);

`

Conic gradients are perfect for creating pie charts, loading spinners, and color wheels in pure CSS.

Multiple Color Stops

Any gradient type supports multiple stops with explicit positions:

`css

background: linear-gradient(90deg, #a78bfa 0%, #ec4899 50%, #22d3ee 100%);

`

Hard Stops

Place two colors at the same position for a sharp edge instead of a smooth transition:

`css

background: linear-gradient(90deg, #a78bfa 50%, #22d3ee 50%);

`

Repeating Gradients

Add repeating- to create patterns:

`css

background: repeating-linear-gradient(45deg, #a78bfa, #a78bfa 10px, #22d3ee 10px, #22d3ee 20px);

``

Performance

CSS gradients are rendered by the GPU. They perform well even on mobile devices. Avoid gradients with more than 10 stops on elements that animate frequently — the repaints can add up.

Browser Support

All modern browsers support linear, radial, and conic gradients. Conic gradients arrived in all major browsers in 2020. No prefixes are needed in 2026.

Try It

Use our gradient generator to experiment with all three types and copy the CSS code instantly.