Backdrop Filter In Tailwind CSS
A brief overview of Tailwind Backdrop Filter use cases with examples will be provided in this article.
In Tailwind CSS, the Backdrop Filter class is used to apply filter effects to the background behind elements.
Tailwind Backdrop Filter
With the Tailwind CSS backdrop filter, you can enable the backdrop of any filter that uses it.
It works similarly to a filter class, but in the reverse direction.
As we have seen in the filter class, every element that needs an effect like blur, contrast, brightness, etc, needs to first be filtered before the effect can be applied. In a similar manner, backdrop-blur or backdrop-contrast must be used with backdrop-filter to disable the effect.
Syntax
<element class="backdrop-filter | backdrop-filter-none">..</element>
Tailwind Backdrop Filter Classes
- backdrop-filter – The backdrop filter is enabled using this class.
- backdrop-filter-none – Filters are removed using this class.
Different filter effects include:
1 – backdrop-blur: This class is used to apply a backdrop blur filter to an element.
2 – backdrop-brightness: This class is used to set the backdrop brightness of an element.
3 – backdrop-contrast: This class is used to set the backdrop contrast filter of an element.
4 – backdrop-hue-rotate: This class is used to apply a hue-rotate filter to an element. As a result, the hue of an element and its contents is rotated
5 – backdrop-saturate: This class is used to apply a saturation filter to an image which super-saturates or desaturates an input image.
6 – backdrop-sepia: This class is used to apply a sepia filter to an image which makes it more warm.
7 – backdrop-grayscale: This class is used to set the grayscale of an image.
8 – backdrop-invert: This class is used for inverting colours in images
9 – backdrop-opacity: This class is used to make the samples in the input image transparent.
Example:
Example:
Example:
Example Explanation
Above example includes a header that contains the title “MrExamples” and a paragraph that describes the Tailwind Backdrop Filter Class.
The body section contains a single div element that includes an image and three additional div elements.
The div elements have a border, a size of one-fifth of the parent container, and different backdrop filter classes.
The first div element has the “backdrop-saturate-150” class, which increases the saturation of the backdrop.
The second div element has the “backdrop-opacity-50” class, which sets the opacity of the backdrop.
The third div element has the “backdrop-contrast-50” class, which adjusts the contrast of the backdrop.
Above examples demonstrates how to apply different Tailwind backdrop filter effects.
