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.