So in this movie, we're gonna talk about drop shadow function in CSS image filters, which allows us to apply a drop shadow effect to the image. So here's a demo. This is the original image. And then we have the second image where I have applied drop shadow effect. You can see this green drop shadow effect. Here's another one, which is third image.

And I have also applied a drop shadow effect right there. In this case, this drop shadow is light brown. So you might be thinking that what is the difference between drop shadow and box shadow? Well, there's a major noticeable difference when I use this drop shadow function. Some browser provide hardware acceleration for smooth performance. And there's another big difference between drop shadow and box shadow is that drop shadow mimics the intended objects outlined naturally, unlike box shadow that treat only the box as its path.

Let me show you example here. So here we go. This is the box shadow example. You see if I apply it box shadow, it is actually going to treat this box as a path. But when I apply a drop shadow, well, it is going to mimic the outline of this intended object. So this is the object.

And it's actually mimicking the outline of this object and apply drop shadow right there. So this is your drop shadow. And this is your box shadow. So before digging deep into code, let me just show you that what kind of value we can pass as a parameter in this drop shadow function. So here we go. This is a drop shadow function, and you can pass a length x.

So this is going to be length x, then length, right then length, blood, and then the color. So in land, it means you can pass your pixel AMS Rams. So now let me just go to my quatre where I'll show you this drop shadow function in action. So here we go. I'm on my equator. And we're gonna work on this last two images, which have a class of image to an image.

So let me go to Filter CSS. And let me just target this image to some targeting a filter and to interview drop shadows function. So now if I don't pass anything here, well, nothing's gonna happen because obviously, I haven't passed any drop shadow values, so I need to pass it. But let me just tell you that you can pass the exact value, you pass into box shadow property. So the very first value is going to be your x coordinate, then the next value is going to be your y coordinate, and the next one is going to be your blood and then the color of the drop shadow. In this case, let's go with black.

Okay, so I'm just writing this black here and if I go here, you will see this top Excel X and a Y coordinate with a 10 pixel blur, drop shadow. Let me show you this is actually on x coordinate. So if I make it 20, it will actually move right let me show you. You see, it's moving to right. Because the very first parameter control the x coordinate, if you want to move on vertically, welcome target. This is a second one.

Let's say I made it 20 Now it will move down. And that's the y axis. Obviously, if I make this 200, you will see this symbol right here. So now, this is your x coordinate, this is a y, and this is the blood. So let's make it 50. And it will go to read it, you know, 50 pixels wide.

Let me just go here, I want to test it. Now, if I paste it, if I save it, if I just go here, you see, you can see it a very subtle brown kind of drop shadow. So yep, this is your drop shadow. And let me just go ahead copy it. And let's go to our third image, where I'm going to apply some different color. So in this case, I'm gonna go for the C green here.

And this time, I'm going to make it three pixel, three pixel, let's make it five XL, which is going to be very solid. It's not going to spend much but it will actually going to give it this glow effect here, you see. So this is your drop shadow. This is very powerful. Again, if you want to see the difference between corruption and box shadow, well, you're more than welcome to see it, because I'm not on this property to box shadow. And now you can see the difference here, someone's go ahead and copy this value.

And I'm gonna paste it right here and save it. If I go here, you see that this is the exact same value, but this is your box shadow. And this is your drop shadow. You see, there's a big big difference, because box shadow treating this entire box as their all time path, but drop shadow is actually mimicking this object outline and creating drop shadow around this object. So yep, this is how you can add drop shadow effect on your CSS using drop shadow function in CSS image filters.