Adding a Shadow to an SVG Icon with Tailwind CSS

Simon Vrachliotis
Simon Vrachliotis

We have this beautiful snowflake icon, very seasonal (well, not so much from Australia), and we're going to try and make this snowflake stand out a little bit more by adding a shadow behind it.

snowflake icon

First, let's try adding a shadow with the class attribute for our SVG:


<svg class="h-64 w-64 stroke-white shadow-md"></svg>

When you save this, you can see that the shadow is actually a rectangle around the snowflake, which is not what we want. Let's make it bigger with shadow-xl:


<svg class="shadow-xl"></svg>

That's the thing with box shadows—they take the bounding rectangle of an element and then apply the shadow around it. We don't want that, so maybe we can try outline or ring utilities? Unfortunately, they're also square.

Let me show you a CSS property that's going to be really useful for us here. In the Tailwind docs, search for Drop Shadow. Drop Shadow is a CSS filter, and it looks similar to a box shadow with the big difference that it will follow the edges of a shape, which is super cool for what we're trying to do.

So let's try it here with drop-shadow:


<svg class="drop-shadow-md"></svg>

This is much better. You can see the Drop Shadow filter is following every single crystal little edge of this icon, which is way, way, way better.

Let's try a large one, or even extra large:


<svg class="drop-shadow-xl"></svg>

And voila, our snowflake now stands out beautifully from the background.

A beautiful snowflake with a shadow

Transcript

00:00 We have this beautiful snowflake icon, very seasonal, well, not so much from Australia, and we're going to try and make this snowflake stand out a little bit more by adding a shadow behind it. So here's the class attribute for my SVG. Let's try to add a shadow and let's go

00:15 ShadowMD. And when I save this, you can see that the shadow is actually a rectangle around the snowflake, which is really not that great. Let's make it bigger, ShadowXL, to make sure that you can see that. And that's the thing with box shadows, they take the bounding rectangle of an element and then apply the shadow around this. And we don't want that, so maybe we can try

00:35 outline? Nope, square as well. What about ring utilities? Nope, square as well. Okay, let me show you a CSS property that's going to be really useful for us here. In the Tailwind docs, I will search for DropShadow. DropShadow is a CSS filter, as you can see in the sidebar category, and it

00:54 looks similar to a box shadow with the big difference that it will follow the edges of a shape, which is super cool for what we're trying to do. So let's try it here, DropShadow, and let's try the medium one. And yeah, this is much better. You can see the DropShadow filter is following

01:12 every single crystal little edge of this icon, which is way, way, way better. Let's try a large one, or even extra large. And voila, our snowflake now stands out beautifully from the background.

More Tips