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.
Apply a 4px blur to #box.
Apply 50% grayscale to #box.
Brighten #box by 1.5 and double its contrast.
Apply a red drop-shadow 2px right, 2px down, 4px blur.
70% sepia followed by 1.2 saturation.
A blur radius needs a length.
The filter function is grayscale.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceChained filter functions are separated by spaces.
A filter shadow uses the drop-shadow function.
The box should be filtered, not the wrapper.