Inset Shadows Directly on img Elements (Part 1)

"This problem is something that has been the topic of countless questions on Stack Overflow as well as Reddit and other places on the internet. It has also been covered in many articles over the past 15 years. Now in 2025, it still made the list of pain points when dealing with shapes & graphics according to the State of CSS survey."

"I want to show you a solution that allows us to add the shadow directly on <img> elements without requiring an extra wrapper or sibling for each. This article is going to have two parts, the first (current one) going into a lot of detail about the how behind creating the basic inset black shadow with offsets, blur and spread radii and the second being a deep dive into pain points like painting the shadow and limitations tied to length values."

"Note that the filter as it is at this point causes the img to disappear in Firefox, even as it leaves it unchanged in Chrome. And, according to the spec, an empty filter element means the element the filter applies to does not get rendered. So Firefox is following the spec here, even if the Chrome result is what I would have expected: an empty filter being equivalent to no filter applied."

Images render their content on top of CSS box-shadow, so inset shadows applied via box-shadow are obscured by the image. Applying shadows directly to <img> elements requires an alternate technique because box-shadow paints beneath element content. SVG filters can add inset shadows directly on <img> elements without extra wrappers or sibling elements. The technique builds a base filter using SourceAlpha and then composes offset, blur and spread radii to emulate an inset black shadow. Browsers differ: an empty filter hides the element in Firefox per the specification while Chrome currently leaves it unchanged. Additional challenges include shadow painting order and limitations tied to length values.

Read at Frontendmasters