Module 6 · Visual Effects · Lesson 2 of 3

CSS Shadows

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

Shadow is the cheapest realism in CSS: one property for boxes, one for text, zero images. Learn the value order, the rgba habit, and layering — then depth becomes a dial you turn.

1. box-shadow and text-shadow

CSS — the two shadow properties

.card {
  box-shadow: 0 8px 20px -6px rgba(32,36,42,.25);
  /*          x  y  blur spread color             */
}
h1 {
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
  /*           x  y  blur color (no spread)       */
}

Order is offset-x, offset-y, blur, (box only) spread, color. Realistic light comes from above: small positive y, generous blur, translucent rgba() black. Add inset to box-shadow for pressed, carved looks.

2. Layering and glow

CSS — comma-stacked depth, neon glow

.panel {
  box-shadow:
    0 1px 2px rgba(32,36,42,.08),
    0 8px 16px rgba(32,36,42,.10),
    0 24px 48px rgba(32,36,42,.12);
}
.neon {
  color: #fff;
  text-shadow: 0 0 6px #7FD9E0, 0 0 16px #4FB2C4, 0 0 30px #2E7E92;
}

Multiple shadows stack with commas, first on top. Tight-dark + wide-soft imitates real light falloff; zero-offset colored layers become glow — the entire neon-sign aesthetic is stacked text-shadows.

💡 All four shadow tools output these exact patterns: Box Shadow, Text Shadow, Neon Text, and Layer Styles.

3. Try it yourself

Lift the card with 0 12px 24px -8px rgba(32,36,42,.3), press the input with an inset shadow, and give the heading a soft text-shadow.

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 Shadows

1. box-shadow and text-shadow

2. Layering and glow

3. Try it yourself

4. Quiz — check your understanding

CSS Shadows Quiz

Practice with these generators