Skip to main content

CSS Filters — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Filters 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

    Blur an element

    easy10 min

    Apply a 4px blur to #box.

  2. 2

    Desaturate an element

    easy10 min

    Apply 50% grayscale to #box.

  3. 3

    Chain two filters

    easy10 min

    Brighten #box by 1.5 and double its contrast.

  4. 4

    Add a drop shadow

    easy10 min

    Apply a red drop-shadow 2px right, 2px down, 4px blur.

  5. 5

    Build a vintage look

    medium10 min

    70% sepia followed by 1.2 saturation.

Find the bug(5)

  1. 1

    Fix the blur with no unit

    easy8 min

    A blur radius needs a length.

  2. 2

    Fix the British spelling

    easy8 min

    The filter function is grayscale.

  3. 3

    Fix the comma between filters

    easy8 min

    Chained filter functions are separated by spaces.

  4. 4

    Fix box-shadow used as a filter

    easy8 min

    A filter shadow uses the drop-shadow function.

  5. 5

    Fix the filter on the wrong element

    easy8 min

    The box should be filtered, not the wrapper.

Ready to write the code?

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

Open the workspace