Skip to main content

Blending & Backdrop — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Blending & Backdrop 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

    Blend an element

    easy10 min

    Blend #box with what is behind it using multiply.

  2. 2

    Blend background layers

    easy10 min

    Blend the background layers of #box with screen.

  3. 3

    Frost the backdrop

    easy10 min

    Blur whatever sits behind #box by 8px.

  4. 4

    Contain the blending

    easy10 min

    Give #wrap its own stacking context so blending stops there.

  5. 5

    Build a frosted panel

    medium10 min

    An 8px backdrop blur behind a half-white background.

Find the bug(5)

  1. 1

    Fix the shortened property

    easy8 min

    The property is mix-blend-mode.

  2. 2

    Fix the wrong blend property

    easy8 min

    Blending the element's own layers uses background-blend-mode.

  3. 3

    Fix filter used for the backdrop

    easy8 min

    This should blur what is behind the element.

  4. 4

    Fix the isolation value

    easy8 min

    The value is isolate.

  5. 5

    Fix the blur with no unit

    easy8 min

    A blur radius needs a length.

Ready to write the code?

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

Open the workspace