Blur an element — practice exercise

What you'll be asked to do

1. 1.Blur an elementexercise · easy · 10 min

   Apply a 4px blur to #box.

   Passes when: Apply a 4px blur to #box.

2. 2.Desaturate an elementexercise · easy · 10 min · practice plan

   Apply 50% grayscale to #box.

   Passes when: Apply 50% grayscale to #box.

3. 3.Chain two filtersexercise · easy · 10 min · practice plan

   Brighten #box by 1.5 and double its contrast.

   Passes when: Brighten #box by 1.5 and double its contrast.

4. 4.Add a drop shadowexercise · easy · 10 min · practice plan

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

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

5. 5.Build a vintage lookexercise · medium · 10 min · practice plan

   70% sepia followed by 1.2 saturation.

   Passes when: 70% sepia followed by 1.2 saturation.

6. 6.Fix the blur with no unitbug fix · easy · 8 min

   A blur radius needs a length.

   Passes when: A blur radius needs a length.

7. 7.Fix the British spellingbug fix · easy · 8 min · practice plan

   The filter function is grayscale.

   Passes when: The filter function is grayscale.

8. 8.Fix the comma between filtersbug fix · easy · 8 min · practice plan

   Chained filter functions are separated by spaces.

   Passes when: Chained filter functions are separated by spaces.

9. 9.Fix box-shadow used as a filterbug fix · easy · 8 min · practice plan

   A filter shadow uses the drop-shadow function.

   Passes when: A filter shadow uses the drop-shadow function.

10. 10.Fix the filter on the wrong elementbug fix · easy · 8 min · practice plan

    The box should be filtered, not the wrapper.

    Passes when: The box should be filtered, not the wrapper.

Between them these tasks cover blur and grayscale, Chaining filters and drop-shadow.

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