So in this movie, we're going to talk about blood function in CSS image filters, which allows you to apply a Gaussian blur effect to the image. So here's an example. This is the original image. And if I just add five pixel blur, it will look like this. And if I add 10 pixel blur, well, it will go into even the image, just like this. So we will obviously want to dig deep into coding, but before, let me just tell you that what kind of value you can pass as a parameter in this blood function, so here we go.
This is the blood function. And you can pass any length, well, it could be in pixel, it could be in RAM, it could be in Em, I mean, any measurement unit you want. So let me just visit to my quatre where I'll show you this blood function in action. So here I am on my equator, and we are going to work on this last images, which have a class of image to image three and go to Filter CSS. So let me just go and use this filter property. And now I'm To make use of this blood function.
Now what happens if I just leave this empty? Well, nothing gonna happen, because by default, it has zero pixels. So let me just go right here. And you see, the second image remains unchanged. So for that, let me just go here. And let's pass any measurement on line 20.
In this case, I must say, two pixels. So two pixels is enough for now. And you will see a little blur right here in this second image, which is two pixel blur. So let me just go to here. And let me just use this filter property on this third image. And this is going to be blur.
And here I'm gonna save five bucks. And if I go here, you see this 30 minutes is even blur, right? So you can increase the land value as much as you want. But obviously, in certain parameters, because if I just added any crazy value at this image, it will going to disappear completely See, this image is actually disappeared. So that's crazy. And I think in order to do that, maybe in some sense You want to do that, but it's up to you.
And if I do, well, it will totally bleed out. You see it with like a color on the spot here, right? So yep, this is actually your bladder function. And you can pass any unit value which you can pass as a pixel, you can pass this around, or M, it's totally up to you. So let me just go with the ram here. And the five RAM is actually 16 into 580 pixels, and it's a lot.
So let me just save it and if I go here, you see it's 80 pixel blur, which obviously we do not want it. So let me just make it one RAM, which is 16 pixel blur, and you still see this is actually the 16 pixel blur, so you're gonna use this ram or you can also use M. So M is also a relative measurement. And obviously, and obviously, when m is equal to 16 pixel, one gram is equal to 16 pixels. So you will see the second and third M is exactly the same, okay? So you can use em RAM and pixel or any unit revise to use in future, right? So let's make it something like a double, which is two pixels.
Let's make one pixel here. Let's make this around five pixel, right. And if I go here, you see that now this have one pixel blur, and this five pixel black, obviously, you can use it to add some kind of a cool effect, but it's totally up to you. And one more thing, just like most of the function, this also do not accept any negative value. So forget about it. If I add here minus hypixel, you say, this is now the word back to its original.
So this function did not accept any negative value. So this is how you can add Gaussian blur to your images using blend function in CSS image filters.