CSS Gradients

Gradients are generated background images that blend between colors without needing a separate image file.

A linear gradient changes along a line, for example linear-gradient(90deg, #2563eb, #14b8a6). A radial gradient spreads from a center or defined position. You can also use more than two color stops to control the transition.

Gradients are image values: assign them to background-image or background, not to the background-color property.

Color stops define positions on the gradient line or shape; the browser interpolates colors between stops.

Blend from deep blue to teal horizontally.

HTML

<div class="gradient">Smooth transition</div>

CSS

.gradient { color: white; font-weight: 700; padding: 28px; border-radius: 12px; background: linear-gradient(90deg, #2563eb, #0f766e); }

Rendered output

Observe: Blue transitions gradually into teal from left to right.

A light center fades toward a darker edge.

HTML

<div class="gradient">Spotlight</div>

CSS

.gradient { color: #0f172a; font-weight: 700; padding: 28px; border-radius: 12px; background: radial-gradient(circle at center, #fef3c7, #f59e0b); }

Rendered output

Observe: The gradient radiates outward instead of progressing along a straight line.

Color stops define positions on the gradient line or shape; the browser interpolates colors between stops.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A CSS gradient is an image value, so background-color: linear-gradient(...) is invalid.
• Text contrast can vary over a gradient; test each region behind important text.

Change the linear angle to 180deg and add a third color stop between blue and teal.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use gradients for lightweight decorative surfaces while monitoring contrast.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.