Add a box shadow — practice exercise

What you'll be asked to do

1. 1.Add a box shadowexercise · easy · 10 min

   Give #box a red shadow offset 2px right, 4px down, blurred 6px.

   Passes when: Give #box a red shadow offset 2px right, 4px down, blurred 6px.

2. 2.Add an inner shadowexercise · easy · 10 min · practice plan

   Give #box a 10px blue glow on the inside.

   Passes when: Give #box a 10px blue glow on the inside.

3. 3.Add a text shadowexercise · easy · 10 min · practice plan

   Give #text a black shadow 1px right, 1px down, blurred 2px.

   Passes when: Give #text a black shadow 1px right, 1px down, blurred 2px.

4. 4.Layer two shadowsexercise · easy · 10 min · practice plan

   A red shadow at 2px and a blue one at 4px, with no blur.

   Passes when: A red shadow at 2px and a blue one at 4px, with no blur.

5. 5.Build a subtle elevationexercise · medium · 10 min · practice plan

   A soft shadow: no x offset, 1px down, 2px blur, black at 20%.

   Passes when: A soft shadow: no x offset, 1px down, 2px blur, black at 20%.

6. 6.Fix the missing unitsbug fix · easy · 8 min

   Shadow offsets need units.

   Passes when: Shadow offsets need units.

7. 7.Fix the misspelled keywordbug fix · easy · 8 min · practice plan

   An inner shadow uses the keyword inset.

   Passes when: An inner shadow uses the keyword inset.

8. 8.Fix box-shadow used on textbug fix · easy · 8 min · practice plan

   Text needs text-shadow.

   Passes when: Text needs text-shadow.

9. 9.Fix the missing commabug fix · easy · 8 min · practice plan

   Multiple shadows are separated by commas.

   Passes when: Multiple shadows are separated by commas.

10. 10.Fix the harsh shadowbug fix · easy · 8 min · practice plan

    The shadow should be black at 20%, not solid black.

    Passes when: The shadow should be black at 20%, not solid black.

Between them these tasks cover box-shadow, text-shadow and Inset and layered shadows.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.