Quick step by step guide to creating an inset shadow on an img element Illustrating the 5 simple steps: ✨ offset initial image ✨ blur it ✨ subtract it out of initial image alpha to get a black inset shadow ✨ paint it orange ✨ put it on top of the initial image

Notices where this attachment appears

1. Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Tuesday, 14-May-2024 19:07:46 JST Ana Tudor 🐯

   #tinySVGtip How do you create an *inset* shadow on an `img` element?

   You might think inset `box-shadow`, but it doesn't work! Really, there are tons of articles & questions on StackOveflow on this very topic.

   SVG filters to the rescue for an elegant solution!

   ✨ offset & blur image
   ✨ subtract it out of original image alpha ⇒ get black inner shadow
   ✨ paint it 🍊
   ✨ place it on top of img

   #SVG #filter #inset #shadow #image #svgFilter #code #coding #frontend #webDev #webDevelopment