CSS · Module 16 · Lesson 15 of 48

Gradients (Linear & Radial)

CSS Gradients

Compose smooth gradients between color bands without using heavy graphic image assets:

linear-gradient: Transitions colors along a linear angle.

radial-gradient: Radiates colors from a central node out.

Why does it matter?

Gradients add depth, modern aesthetics, and visual pop to websites. They are commonly used for modern buttons, card backgrounds, and dark overlays on top of background images to make text readable.

Syntax Breakdown

Set gradients using the background or background-image properties:

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

linear-gradient(red, yellow) — Blends from red (top) to yellow (bottom).

linear-gradient(to right, red, yellow) — Blends from left to right.

linear-gradient(45deg, red, yellow) — Blends along a 45-degree angle.

Common Mistakes

Forgetting commas between parameters: Gradients take multiple parameters (angle, colors) that *must* be separated by commas: linear-gradient(45deg, red, yellow).

Applying gradients to background-color: Gradients are processed as images. You must apply them to the background-image or shorthand background property. Setting background-color: linear-gradient(...) will fail.

Quick Reference

linear-gradient(angle, c1, c2) — Linear transition.

radial-gradient(shape, c1, c2) — Radial circular transition.

to right, to bottom left — Direction keywords.

Your Task

Set the `background` property of the `.gradient-box` class to a `linear-gradient` transitioning from `red` to `yellow`.

index.html

Type code above to start the lesson.

Live Preview