CSS filters allow you to apply visual effects like blur, grayscale, brightness, etc., to elements. But what if you want to remove those filters? It’s simple—just set the filter property to none.
Example: Remove Grayscale and Blur Filter from an Image
Below is an image with grayscale and blur filters applied by default. Click the button to remove the filter using JavaScript (by applying filter: none).
Pure CSS Way to Remove Filter
If you’re toggling filters using classes, simply define a class that has filter: none;.
<style>
.no-filter {
filter: none;
}
</style>
<img src="image.jpg" class="filtered-img no-filter"/>
Quick Tip
If you want to remove only a specific filter effect, you’ll need to rewrite the filter property without that part. For example, if you had:
filter: blur(5px) brightness(0.5);And you only want to remove blur, then you write:
filter: brightness(0.5);