Published at
Updated at
Reading time

I just cleaned up all the open tabs in my browser and discovered a Tweet from Jamie Kyle (if you open it, yes, I had that tab open for six months ๐Ÿ™ˆ). Jamie described how he implemented a natural shadow component using React and SVG filters. The shadow reflects the element's colors, and they are what give the effect its natural look.

Tweet from Jamie Kyle: Working on a <NaturalShadow/> component that will add a color-aware shadow to any element of any shape

Jamie wraps an image into an SVG element and uses SVG filter elements to create the beautiful shadow.

That approach got me thinking, a while ago, I published a blog post describing how to inline SVG filters in CSS. It turns out you can apply Jamie's SVG filter without React or wrapping everything in an SVG element. Pure CSS does the job! ๐ŸŽ‰

Here's the CSS class with the inlined SVG filter.

.natural-shadow {
  /* inline the SVG filter */
  filter: url('data:image/svg+xml,\
    <svg xmlns="">\
      <filter id="naturalShadow" x="0" y="0" width="2" height="2">\
        <feOffset in="SourceGraphic" dx="3" dy="3" />\
        <feGaussianBlur stdDeviation="5" result="blur" />\
          <feMergeNode in="blur"/>\
          <feMergeNode in="SourceGraphic"/>\

What's cool about this approach is that the SVG filter is visually applied to the element and its children. You can apply it to a wrapper div such as the one below.

<div class="natural-shadow">
  <img src="/your-image.png" alt="Your iamge">

See the result in action. This shadow is done in pure CSS (sort of ๐Ÿ™ˆ). ๐Ÿ‘‡

A color wheel

As stated in my previous blog post, Safari seems to have some issues with inlined SVG filters. If you know what's the problem, please let me know!

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles