 If you've ever had a div with multiple elements inside of it, you might have tried to put a box shadow on there to do something interesting, but instead of getting the effect you're after, you got something that looked like this, which probably wasn't what you wanted. So then maybe you go, oh, I know what I could do. I could add a box shadow to every element inside of there, but then you get these like overlapping shadows and shadows on top of shadows and stuff, and probably not what you wanted either. You want like one shadow that can just be for all of those elements. Luckily, there's a really easy way to do that with the filter property, and there's some other cool stuff that we can do with it as well. Hello, my front-end friends, and welcome back to yet another video. I'm so glad that you've come to join me once again. And if you're new here, my name is Kevin. And here at my channel, I help you formadly, deeply in love with CSS. And if I can't get you to fall in love with it, I'm hoping to at least get you to be a little bit less frustrated by it. And I think I can do that today with the filter property. So let's dive in and see how it works. All right, so I am in Code Pen, so I'll share this down in the description below. And as we saw at the intro, we have this, and if we try a box shadow on there, it doesn't work black. And you know, that's terrible because we get this like transparency around it, really not what we want. And even if I try doing the something like this that selects all the children inside, and I'm going to add a whatever the thing that expands it out there. So you can really see like, I don't want this is cool to have a shadow. I want the shadow to go all the way like that and not be on this white box that's right here. And so we can do that. And as I said, it's actually really easy. And instead of using a box shadow, what we need to do is use a filter. And on the filter property, we can do a drop shadow, because they like to confuse us a little by having different names on things. And the drop shadow is a very similar syntax. And we'll just do black again so we can see how it's working. And actually, you might be saying, well, Kevin, it's doing the same thing, but I don't want it on all my children. Now I want it on the example itself and look at that. So now it's actually going all the way around. Now I can't do the stroke thing, not stroke. I can't think of the right word right now, but the one that offsets it. Just because with drop shadow, it's a little bit like a text shadow. You can't do that sadly. So it's not an option in this case, but you can see that it does work. And it gives a singular shadow to the entire element, taking into account transparencies and other stuff like that. So it's kind of interesting. Another cool thing, actually, that you can do with filter is if I do bring that back onto the children. And actually, one thing that's really interesting with this, let's turn this filter off for a second. So I'm just going to comment that out. And let's go back to having this as a box shadow, just to highlight another difference that we can do with filter. And so this is going to be a 001RAM black, just so we stay consistent with what we're doing. But let's change the background here to just the color. And you got to spell things right, color helps. And when you have text and you put a box shadow on it, you get this type of thing going on, right? Which isn't what I'm after right now. Now I could replace that with a text shadow, but then my box over here wouldn't have a shadow on it. This is a bit of an edge case. You probably wouldn't want to do this regularly. But if you use a filter on something, it will work both on an element and on text. And I'm actually going to make this a little bit smaller. Just so we can see that the text definitely does have a shadow coming on it. If we turn it off, we'll really see it. It sort of fades all the way. And then we create some separation between the background there. So drop shadow is kind of cool in that it works both on text as well as on other stuff, including if this had a PNG with some transparency or other things like that, you could bring in your shadows on those elements, which is kind of interesting. Now off the top, I did also mention that there's other stuff that you can do with filter. And there's a whole bunch of weird things that we can actually do with it. So for example, I could do a filter and we could do a gray scale, gray scale of zero. And actually I want to do one, because we need 100% on that. So you can actually do 100% here as well, and it would also work. There's an opacity one that works here as well where you can use the regular opacity of zero to like one to zero, like you would opacity or you can put in percentages. So here, like if I do 50%, it's gonna be 50% gray scale, or I could come in and do a 0.5, and it's going to have the same thing where it's a 50% opacity, or gray scale, I should say. And so let's put that back to zero, because this isn't our one, I should say. This is probably not something that you would actually do. But let's, we'll make this lime green. I don't know why we would do this, but you can see they're all gray now and you could do, and I've seen this done with images before. It can make it a bit more interesting than this, but we'll say example hover is, and I guess you'd have a focus state and other stuff that you could do this on, but then we could change the filter over to a zero and of course do a transition on my filter of 500 milliseconds, just as a quick little thing we can do on there. And then, look at that, we can actually get that to change and because it's on these two different elements, maybe what we'd actually do here is hover here and then all of the children get rid of their gray scale. There we go. So you can do that type of thing. I don't think I'd use it exactly like this with lime green text, but it opens up some interesting things. And you might be wondering, well, what if I want a drop shadow on there too? Well, we can do that. And you'll notice right now my drop shadow is not working because we can't have the same property two times on something because that's just getting in the way of whatever it is we're doing. This one's coming second, so it's overwriting that one, but we could come in and just put two of them here and then you can have multiple filters on something and then let's keep that there. So then we can have our shadow that's in both situations or maybe you turn off your shadow or whatever it is, but just to say you can have multiple different effects being applied and stuff, you'll see it's a little janky because you shouldn't be doing transitions on shadows. It's smoothed up now, but those first ones were kind of janky. So let's leave those shadows on all the time. There is a way to do performant drop shadows or animating shadows, but this isn't the right way to do it. Blur is another one that maybe you want to use. So here we can say there's a blur of one rem and then here we do a blur of zero. So obviously it's very blurry and then we can have it come into focus. Don't know what the performance is on blur. So and that's a really big blur, maybe a 0.25 or something. But yeah, we can blur things out a little bit and stuff. So a few different interesting use cases. I think those are still in grayscale and drop shadow are the most useful. Then blur and then there's a few others like the sepia and the hue shift and a few other ones. So I'll link to the MDN article down below that goes into detail on all of those. And if you would like to know how to do performant drop shadows instead of doing this where you can get a little bit janky or if you just like fun CSS effects and you'd like to look at more of those types of things, there is a video on the performant drop shadows and there is a short custom playlist that I put together right here on fun CSS effects. And with that, a very big thank you to Jan, Johnny, Stuart and Tim who are my supporters of awesome over on Patreon as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.