Module 6 · Visual Effects · Lesson 1 of 3

CSS Gradients

Intermediate ⏱ 20 min2 sections · 1 exercise · 4-question quiz

Gradients are images the browser paints for free: linear lines, radial glows, conic sweeps. Master color stops and you can draw everything from hero backdrops to stripes, charts, and gradient borders.

1. Three geometries, one idea

CSS — the family

.a { background: linear-gradient(135deg, #3E6787, #63B29A); }
.b { background: radial-gradient(circle at 30% 30%, #63B29A, #3E6787); }
.c { background: conic-gradient(from 0deg, #5A8AB9, #63B29A, #E0982D, #5A8AB9); }

Linear travels along an angle (0deg is up, 90deg right). Radial radiates from a positionable center. Conic sweeps around the center like a clock — pie charts and color wheels in one property.

2. Color stops: the real control

CSS — stops, hard edges, layers

/* positioned stops */
background: linear-gradient(90deg, #3E6787 0%, #5A8AB9 30%, #63B29A 100%);

/* two stops at the same spot = hard edge = stripes */
background: repeating-linear-gradient(45deg, #5A8AB9 0 10px, #EAF1F6 10px 20px);

/* comma-stacked layers (first on top) */
background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url(photo.jpg) center/cover;

Between stops the browser interpolates; collide two stops and the blend becomes a hard line — the secret behind every CSS pattern. Because gradients are background images, they stack with commas, layer over photos, and can even fill text via background-clip: text.

💡 Build visually, then read the output: the Gradient generator, Pattern generator and Text Gradient all emit exactly these syntaxes.

3. Try it yourself

Three tasks, one element each: give .a a 135° linear blend (#3E6787 → #63B29A), give .b a radial glow, and turn .c into stripes with a repeating gradient.

exercise.html — editable

4. Quiz — check your understanding

🏆

Quiz passed? You're one step closer to your certificate.

Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.

Track my progress →

CSS Gradients

1. Three geometries, one idea

2. Color stops: the real control

3. Try it yourself

4. Quiz — check your understanding

CSS Gradients Quiz

Practice with these generators