Backdrop Blur In Tailwind CSS
In this article, we will discuss and demonstrate the use cases of Tailwind Backdrop Blur class.
The blur feature was introduced in Tailwind CSS version 2.1. In normal CSS, the Backdrop Blur class is part of the Backdrop Filter module, which is a new module that is not yet supported by all browsers.
However, Tailwind CSS enables developers to use the Backdrop Blur class in all web browsers.
Tailwind Backdrop Blur
One of the many useful utility classes available in Tailwind is the Backdrop Blur class.
Using the backdrop blur class, you can apply a blur effect filter to an element.
Visually appealing effects like this can help draw the eye of users to particular parts of a webpage.
Tailwind Backdrop Blur Classes:
- backdrop-blur-0 – This class corresponds to blur(0) on elements with no blur effect.
- backdrop-blur-sm – This class corresponds to blur(4px) on elements with a small blur effect.
- backdrop-blur – This class corresponds to blur(8px) on elements with a normal blur effect.
- backdrop-blur-md – This class corresponds to blur(12px) on elements with a medium blur effect.
- backdrop-blur-lg – This class corresponds to blur(16px) on elements with a large blur effect.
- backdrop-blur-xl – This class corresponds to blur(24px) on elements with an extra large blur effect.
- backdrop-blur-2xl – This class corresponds to blur(40px) on elements with a double extra large blur effect.
- backdrop-blur-3xl – This class corresponds to blur(64px) on elements with a triple extra large blur effect.
Syntax:
<element class="filter backdrop-blur-{amount}">..</element>Tailwind Backdrop Blur Example: 1
Example Explanation:
Above example starts with the declaration of a doctype for HTML5 and then defines an HTML document that contains a head section and a body section.
In the head section, a link to a script file on a CDN (content delivery network) is included. This script file provides access to the Tailwind CSS framework.
In the body section, a heading, a paragraph, and a container with a background image are defined.
The container includes a set of four child elements, each with different Tailwind CSS classes applied. These classes use the “backdrop-filter” property, which is a CSS filter property that applies a filter effect to the area behind an element.
In this case, it is being used to apply a blur effect to the background image.
The child elements have different blur effects applied using the “backdrop-blur” property with different values (0, sm, md), resulting in a range of different blur intensities.
