LESSON 26

Shadows

Learning objective: Add depth with box and text shadows.

Understand

Shadows add a sense of depth and hierarchy.

box-shadow casts a shadow around an element; text-shadow behind text. Values set the x and y offset, blur, and color. Soft, subtle shadows read as depth; harsh ones look dated.

Analogy: A shadow is like light hitting a raised card and casting a soft edge beneath it.

See It in Action

A soft card shadow:

.card {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
How it works: The shadow sits 6px below with a 20px blur and low opacity, giving a soft, floating look.

Try It Yourself

  1. Add a soft box-shadow to a card.
  2. Increase the blur and lower the opacity.
  3. Add a subtle text-shadow to a heading.

Quick Quiz

Which property casts a shadow around a box?

Challenge

Give a set of cards a consistent, soft elevation shadow.

Success condition: Your cards appear gently raised with a soft shadow.