box-shadow vs filter: drop-shadow()

Royer Adames
Jan 26, 2021

After watching Kevin Powell video, link here

What I got out of it was that each tool depends on the use case:

shadow examples on CSS

box-shadow

  • great for square elements
  • for a boxy 📦 shadow
  • when you need spread-radius
spread-radius
No blur
  • filter: drop-shadow() currently does not support it

filter: drop-shadow()

  • great for transparent images
  • When you want the shadow to wrap around the element
  • can ignore the image transparency and wrap around the image element.
  • Note: JPEG does not support transparency.
  • No spread-radius support
  • Can limit what you can do compare to box-shadow

text-shadow

  • For text only

--

--