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