Adding a Shadow to an SVG Icon with Tailwind CSS
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.
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.
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.
- Play Replace Remix's unstable_parseMultipartFormData with @mjackson/form-data-parser
Replace Remix's unstable_parseMultipartFormData with @mjackson/form-data-parser
- Play Epic Workshop Diff Tab Demo
Epic Workshop Diff Tab Demo
- Play Epic Workshop Test Tab Demo
Epic Workshop Test Tab Demo
- Play Get Started with the Epic Workshop App (for React)
Get Started with the Epic Workshop App (for React)
- Play Prisma Typed SQL Queries
Prisma Typed SQL Queries
- Play A Deep Dive in Tailwind Font Settings
A Deep Dive in Tailwind Font Settings