So at first, we're going to talk about this grayscale filter, which allows us to convert the image to grayscale. So here's a demo. This is the original image, and this digital percent grayscale filter effect. But if I look at this second image, well, this image has 50% grayscale filter applied to it. But when he talks about this third image, well, this image is have 100% grayscale filter applied to it. So if grayscale filter value is zero percent, well, it will be original image.

And if you're applying hundred percent, well, it was completely turned into gray. Obviously, we'll see this base color filter in action. But first, let me tell you that what kind of value you can pass as a parameter in this grayscale filter. So here you go. This is our grayscale function, and you can pass number or percent value as a parameter. So let me just go to my quatre where I'll show you this grayscale function in action.

So here I am on my quatre. And we're going to work on these last few images which have a class of image two and Ms three. So let me Go here. And let me just apply this filter to image two. So I'm gonna say here filter, and this is going to be grayscale. Now what happens if I don't pass any value to this grayscale filter?

Well, let me just show you if I save it, and if I go here, you see the second image turned into completely gray. Well, that's because hundred percent is a default value for this grayscale function. Let me prove you that so I'm going to copy this from here, and I'm going to paste it on this image tree. And I'm going to apply this 100% specifically, okay, so I'm going to save it and if I go here, you see that our second and ptolemies are completely tornado gray. So you see that I haven't passed any value. So blitzscale function will automatically will to put 100% and in 30 minutes and specifically saying that make it 100%.

So it will go to convert this current image into grayscale completely. So let me just pass here 50% and when I pass here, a 50%. If I just go here, you see that now we have 50% risk applied to this Second image, and hundred percent on this third wave. So zero, percent and 100%. And let me just tell you that you can pass two kind of value as a parameter in this grayscale function. The first one is this person, and the second one is the number.

So if you want to make it hundred percent, well get rid of everything and just make it one. One is equal to 100%. Because that's a number. This is how you represent 100%. In number, if you want to make it 50%, well, you need to pass as 0.5. If I go here, you will not see any difference.

You see, it's again 50%. And this app, hundred percent grayscale effect. So that's pretty neat here, and again, if you want to make it 10% Well, it's gonna be 0.1 and a finger here, do you see that we have only 10% basically applied to this second image, which is barely noticeable, but you get the idea. So let me just go here. And if you want to pass zero percent, well just make it zero. I'm just gonna say the zero percent a scale.

Now, let me just tell you one important thing is that this is a critical function. do not accept any negative value. So if you pass in a negative value just like this A minus one, well, it will not work. You see, this grayscale filter didn't apply to this image. That's because this grayscale feature, do not accept any negative value. So make sure you pass a positive value.

So let's make it 0.5. And now you see that we have this original image. Then we have descriptive percent grayscale and then we have this hundred percent grayscale. And this is how you can make your images gray using grayscale function in CSS image filters.