Skip to main content

CSS Shadows — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Shadows lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Add a box shadow

    easy10 min

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

  2. 2

    Add an inner shadow

    easy10 min

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

  3. 3

    Add a text shadow

    easy10 min

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

  4. 4

    Layer two shadows

    easy10 min

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

  5. 5

    Build a subtle elevation

    medium10 min

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

Find the bug(5)

  1. 1

    Fix the missing units

    easy8 min

    Shadow offsets need units.

  2. 2

    Fix the misspelled keyword

    easy8 min

    An inner shadow uses the keyword inset.

  3. 3

    Fix box-shadow used on text

    easy8 min

    Text needs text-shadow.

  4. 4

    Fix the missing comma

    easy8 min

    Multiple shadows are separated by commas.

  5. 5

    Fix the harsh shadow

    easy8 min

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

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace