{"id":7213,"date":"2025-10-01T10:59:05","date_gmt":"2025-10-01T15:59:05","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7213"},"modified":"2025-10-01T11:05:08","modified_gmt":"2025-10-01T16:05:08","slug":"inset-shadows-directly-on-img-elements-part-1","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/inset-shadows-directly-on-img-elements-part-1\/","title":{"rendered":"Inset Shadows Directly on img Elements (Part 1)"},"content":{"rendered":"\n

You might think the job of putting an inset shadow on an <img><\/code> is trivial: just set a box-shadow<\/code> like inset 0 1px 3px<\/code> and that’s it! <\/p>\n\n\n\n

You’d be wrong. <\/p>\n\n\n\n

This doesn’t work because the actual image is content<\/em> for the img<\/code> element. And content is painted on top<\/em> of box-shadow<\/code>.<\/p>\n\n\n\n

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

So why yet another article? Well, almost all the solutions I’ve seen so far involve at least another element stacked on top of the img<\/code> (assuming they don’t straight up replace the img<\/code> with a div<\/code>), so that we can have a “cover” with the exact dimensions on top – this is the (pseudo)element that actually gets the inset<\/code> shadow. Beyond using at the very least an extra pseudo-element for each image, this can be annoying for users, as the right click img<\/code> menu is lost unless the “cover” gets pointer-events: none<\/code>.<\/p>\n\n\n\n

I want to show you a solution that allows us to add the shadow directly on <img><\/code> elements without requiring an extra wrapper or sibling for each.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Base setup<\/h2>\n\n\n\n

We have just an img<\/code> element:<\/p>\n\n\n

<img<\/span> src<\/span>='my-image.jpg'<\/span> alt<\/span>='image description'<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
And a simple SVG filter<\/code>:<\/p>\n\n\n
<svg<\/span> width<\/span>='0'<\/span> height<\/span>='0'<\/span> aria-hidden<\/span>='true'<\/span>><\/span>\n  <filter<\/span> id<\/span>='si'<\/span>><\/span>\n  <\/filter<\/span>><\/span>\n<\/svg<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Wait, don’t run away screaming! <\/p>\n\n\n\n
I promise that, while SVG filters may seem scary and this technique has some limitations and quirks, it’s still easy to digest when going through it step by step, each step having interactive demos to help with understanding how things work in the back. By the end of it, you’ll have a bunch of cool new tricks to add to your web dev bag.<\/p>\n\n\n\n
So let’s get started!<\/p>\n\n\n\n
First off, our SVG filter<\/code> needs to be inside an svg<\/code> element. Since this element only exists to contain our filter<\/code>, it is not used to display any graphics, it is functionally the same as a style<\/code> element. So we zero its dimensions, hide it from screen readers and take it out of the document flow from the CSS:<\/p>\n\n\n
svg<\/span>[height='0'<\/span>]<\/span>[aria-hidden='true'<\/span>]<\/span> { position<\/span>: fixed }<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
We then apply our filter<\/code> on the img<\/code> element:<\/p>\n\n\n
img<\/span> { filter<\/span>: url<\/span>(#si) }<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The base filter<\/code> content<\/h2>\n\n\n\n
Offset the alpha map<\/h3>\n\n\n\n
We start off by offsetting the alpha map of the filter<\/code> input, the filter<\/code> input being our img<\/code> in this case. The alpha map is basically the filter<\/code> input where every single pixel has its RGB channels zeroed and its alpha channel preserved.<\/p>\n\n\n\n
Since here the filter<\/code> input is a plain rectangular, fully opaque image, the alpha map (referenced within the SVG filter<\/code> as SourceAlpha<\/code>) is a fully opaque black rectangle within the boundary of our initial image, while everything around it is fully transparent. Note that if the img<\/code> has a border-radius<\/code> (with any kind of corner-shape), then the alpha map is going to respect that too.<\/p>\n\n\n
<svg<\/span> width<\/span>='0'<\/span> height<\/span>='0'<\/span> aria-hidden<\/span>='true'<\/span>><\/span>\n<\/span><\/span>  <filter<\/span> id<\/span>='si'<\/span>><\/span>\n<\/span><\/span>    <feOffset<\/span> in<\/span>='SourceAlpha'<\/span> dx<\/span>='9'<\/span> dy<\/span>='13'<\/span>\/><\/span>\n<\/span><\/mark>  <\/filter<\/span>><\/span>\n<\/span><\/span><\/svg<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
All of those needed for the base filter<\/code> creating a simple inset black shadow have either one or two, though when we get to painting the shadow and other effects, we may need to use some with no inputs.<\/p>\n\n\n\n
For most of those with a single input, we don’t specify that input explicitly (by setting the in<\/code> attribute) because we’re using the defaults! Filter primitive inputs are by default the result of the previous primitive or, in the case of the very first primitive, the filter<\/code> input (referenced within the SVG filter<\/code> as SourceGraphic<\/code>).<\/p>\n\n\n\n
feOffset<\/code> in particular offsets its input along the x<\/em> and\/or y<\/em> axis. In our particular case, it offsets its input by 9px<\/code> along the x<\/em> axis and by 13px<\/code> along the y<\/em> axis.<\/p>\n\n\n\n
The following interactive demo illustrates how this primitive works and allows changing the feOffset<\/code> attributes to see how that affects the visual result.<\/p>\n\n\n\n
These fe<\/code>-prefixed elements inside our filter<\/code> (“fe” stands for “filter effect”) are called filter primitives<\/a>. They may have zero, one, or two inputs. Primitives with zero inputs create a layer based on their other attributes (for example, feTurbulence<\/code> can give us a noise layer based on a baseFrequency<\/code> attribute). Primitives with one input (like feOffset<\/code> here) modify that input. And finally, primitives with two inputs combine them into one result (for example, feBlend<\/code> blends its two inputs using the blend mode given by its mode<\/code> attribute).<\/p>\n\n\n\n
Note that the filter as it is at this point causes the img<\/code> to disappear in Firefox, even as it leaves it unchanged in Chrome. And, according to the spec<\/a>, an empty filter<\/code> element means the element the filter<\/code> 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<\/code> being equivalent to no filter<\/code> applied.<\/p>\n\n\n\n