Box shadow

Add shadows to elements with box-shadow.

What is box-shadow?

box-shadow draws a shadow behind a box. It takes four core values: horizontal offset (offset-x), vertical offset (offset-y), blur radius and color.

For example box-shadow: 2px 4px 8px rgba(0,0,0,0.2) moves the shadow 2 pixels right and 4 pixels down, then softens it with an 8 pixel blur. A semi-transparent black is used as the color so the shadow looks natural.

Inset shadows and layered shadows

To draw the shadow inside the box, add the inset keyword at the start: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2). This gives a pressed-in look, common in text fields for example.

Multiple shadows can be stacked by separating them with commas. On a card, for instance, a light outer shadow plus a second shadow to accent the bottom edge adds a sense of depth.

Exercise Add a shadow to the card

Write a declaration block for the .card selector. Add the box-shadow: 0 4px 12px rgba(0,0,0,0.1) declaration. This places a soft shadow below the card.

Show example solution

/* card shadow */
.card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

Test yourself

In box-shadow: 2px 4px 8px rgba(0,0,0,0.2), what does 8px stand for?
- Horizontal offset of the shadow
- Vertical offset of the shadow
- Blur radius of the shadow
- Color of the shadow
Show answer

Blur radius of the shadow — Correct. The third value is the blur radius; it softens the shadow.

Write the shadow property

.card {
  ____: 2px 4px 8px rgba(0,0,0,0.15);
}

Show answer

.card {
  box-shadow: 2px 4px 8px rgba(0,0,0,0.15);
}

Match the box-shadow values

2px

Horizontal offset
4px

Vertical offset
8px

Blur
rgba(0,0,0,0.2)

Color

Next lesson: Outline

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies