Skip to main content

CSS Opacity — exercises and bug fixes

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

    Half-fade an element

    easy10 min

    Set #box to 50% opacity using a decimal.

  2. 2

    Use a percentage

    easy10 min

    Set #box to 35% opacity using a percentage.

  3. 3

    Fade it out entirely

    easy10 min

    Make #box fully transparent but still take up space.

  4. 4

    Fade the whole group

    easy10 min

    Set #wrap to 0.75 so everything inside fades together.

  5. 5

    Fade the background only

    medium10 min

    A half-transparent background with fully opaque text.

Find the bug(5)

  1. 1

    Fix the value above one

    easy8 min

    An opacity of 2 clamps to fully opaque.

  2. 2

    Fix the missing percent sign

    easy8 min

    Without a % this reads as 35, which clamps to 1.

  3. 3

    Fix visibility used to fade

    easy8 min

    Fading to nothing uses opacity.

  4. 4

    Fix the opacity on the wrong element

    easy8 min

    The whole group should fade together.

  5. 5

    Fix the faded text

    easy8 min

    Only the background should be translucent, not the contents.

Ready to write the code?

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

Open the workspace