Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Combining the drop-shadow Filters
If you apply multiple drop-shadow
filters to one block, then they will produce an interesting effect in combination. Since each subsequent filter in the combination is applied to the image after the previous filters have been applied, another shadow applied to a block with an existing shadow will create a double shadow.
.effect {
/* Regular shadow */
filter: drop-shadow(0px 0px 0px black);
/* Double shadow */
filter: drop-shadow(0px 0px 0px black) drop-shadow(0px 0px 0px black);
}
This is yet another difference between the drop-shadow
filter and the box-shadow
property. More details about multiple box-shadow
shadows can be found in the “Shadow Play” section.
By the way, the drop-shadow
filter can be usefully applied not just to images, but also to ordinary elements. The shadow will follow the opaque outline of the object, just like it does with images. Block pseudo-elements are also included in the shadow area.
Let’s check how it works with an example.
- index.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Comments