filter

grayscale

grayscale is most common filter used in websites, you can use .grayscale-0 to .grayscale-10

<img src="..." class="grayscale-1" />
<img src="..." class="grayscale-5" />
<img src="..." class="grayscale-10" />

Grayscale :hover

grayscale can be used with hover also .hover-grayscale-0 to .hover-grayscale-10

<img src="..." class="hover-grayscale-8" />

Blur

Blur filter can be applied by using shorthand class .blur-0 to .blur-10

    <img src="..." class="blur-1" />
    <img src="..." class="blur-5" />
    <img src="..." class="blur-10" />

Blur :hover

Blur can be used with hover also .hover-blur-0 to .hover-blur-10

<img src="..." class="hover-blur-1 ease-300" />
<img src="..." class="hover-blur-5 ease-300" />
<img src="..." class="hover-blur-10 ease-300" />

Backdrop Blur

Backdrop blur filter can be applied by using shorthand class .backdrop-blur-0 to .backdrop-blur-10

<div class="..." style="background-image:url(...)">
    <!-- without backdrop blur -->
    <div class="...bg-white-30"></div>
    <!-- with backdrop blur filter -->
    <div class="...bg-white-30 backdrop-blur-10"></div>
</div>
without backdrop
.backdrop-blur-10

Image Credit: Mikhail Vasilyev and Qingbao Meng