CSS Gradients Complete Guide — Linear, Radial & Conic

CSS gradients let you create smooth transitions between colors without using images. They're flexible, performant, and supported in all modern browsers. This guide covers everything from basic linear gradients to advanced conic and repeating patterns.

Linear Gradients

The most common type — colors transition along a straight line.

Basic Syntax

background: linear-gradient(direction, color1, color2, ...);

Direction Options

Color Stops

Control where each color starts and ends:

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

Hard Color Stops

Create sharp transitions instead of smooth blending:

background: linear-gradient(to right, red 50%, blue 50%);

Radial Gradients

Colors radiate outward from a center point.

Basic Syntax

background: radial-gradient(shape size at position, color1, color2, ...);

Shape Options

Size Keywords

Conic Gradients

Colors transition around a center point, like a color wheel.

background: conic-gradient(from 0deg, red, yellow, green, blue, red);

Conic gradients are perfect for:

Repeating Gradients

Create patterns using repeating color stops:

background: repeating-linear-gradient(45deg, #3b82f6 0px, #3b82f6 10px, #0a0a0c 10px, #0a0a0c 20px);

This creates diagonal stripes — great for progress bars, loading indicators, and decorative backgrounds.

Performance Tips

Practical Examples

Glass morphism effect

background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));

backdrop-filter: blur(10px);

Text gradient

background: linear-gradient(to right, #3b82f6, #8b5cf6);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

Create your own gradients with our CSS Gradient Generator.