drop-shadow follows the shape, box-shadow follows the box
The image file is a transparent square with a star in it. box-shadow only knows the square; drop-shadow() uses the star's real pixels.
filter applies photo effects such as blur, grayscale and drop shadows to an element, backdrop-filter applies them to what's behind it, mix-blend-mode mixes its colours with the content underneath, and clip-path and mask hide parts of it with a shape or an image.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make every image inside .gallery grey and slightly dark, and show its real colours when hovered, with a 0.3s transition.
Make a .badge cut into a triangle pointing right, using clip-path.
Fade out the right-hand edge of a horizontally scrolling .chips row with a mask, so it hints there is more to scroll.
Explain it without notes
What does filter do, and why does the order of filter functions matter?
When would you use drop-shadow() instead of box-shadow?
How does backdrop-filter differ from filter, and what does it need to be visible?
What is mix-blend-mode, and what problem does isolation: isolate solve?
Compare clip-path and mask-image.
Preview
Console
Nothing logged yet.