So in this movie, we are talking about contrast function in CSS image filters, which allows you to adjust the contrast of the image. So here's the demo. This is the original image, and we have 100%. Contrast, and 100% is the default value for this contrast function. But what happens if we go beyond 100% or over 100%? Well, it's only going to give you more contrast it reserved like this.
This had 200% contrast, which is two times more than this original image. But what happens if you go below 100%? Well, if you go below 100%, you will going to get this darker result. So hundred percent is the default value of contrast, if you go beyond 100%, you will get this a high contrast. And if you go below 100%, you will get this darker result. But before showing you this contrast function in action, let me just tell you, that what kind of value you can pass as a parameter in this contract function.
Well, here's a contrast function. And you can pass a number or percentage value as a parameter in this contrast function. So now let me just go to my quatre where and show you this contrast function in action. So here am I on my quatre. And we're going to work on this last two images, which have a class of image two and image three, then we go to this filter under CSS, I just go to image, and I'm gonna use this filter property. And now this time, I'm going to make use of this contrast function.
Now what happens if I don't pass any value, as I told you, if you do not pass any value here, it will automatically going to assume that this is the hundred percent contrast, which means our image will remain unchanged. So let me show you you see this second image and this image is remained unchanged. Well, that's because it's already have 100% contrast by default. So let me just go here. And let me just copy this one and I'm going to paste it right here. And here, I'm going to pass hundred percent and now what's gonna happen Again, the 30 minutes is going to remain unchanged.
Because again, we are saying that hundred percent contrast rate, which is already it is right. So that's why it's going to remain unchanged. So hundred percent is a default well, but what happened, if we go below 100%. In this case, let's make it zero percent. If I save it, you see that our 30 minutes is going to be a kind of a blackish. Right?
It's a darker isn't it, I'm going to make it complete black. But let me just go here, and let's make it 50% contrast. So if I just do that, you see that we'll still get this blackest result, you see this I have 100% contrast and as you go below hundred percent, you will get this blackish result. So what happens if you go beyond hundred percent? Obviously, you're gonna get more contrast. So let me show you if I go here, and let's make it hundred 50% right.
And this is one is actually a little make it 200%. Right? If I save it, if I go here, you see that now we have more contrast. They said, so. So this is the original image which have 100% contrast, then we have this 150% contrast. And then we have this 200% contrast, which is super high.
Again, you can go crazy, and you can make some tea like, you know, 500% obviously, you do not want that kind of contrast, maybe you want for some cases, but you know, it's totally up to you, you can go as much as you want. So this is extremely powerful, just like other citizens image filter functions, you can pass to kind of value as a parameter, which is percent and the number. So if you want to find a percent, just make it five, if you want 150 just make it 1.5. If I go here, you will not see any changes because it's remained unchanged. It's again, only 20% and 500%. And we have exact same value here.
So let's make it you know, 200% and if I go here, okay, this 100% 200% and 500%. And again, just like a most offices filter function, This also cannot accept any negative value. So if you pass it, you say you just lose all your filters. So that's why just make sure you do not pass a negative value here. So let me just go here. This is how you can adjust the contrast of the image using contrast function in CSS image filters.