Use the
backdrop-blur-*
utilities to control an element’s backdrop blur.
<
div
class
=
"
backdrop-blur-sm
bg-white/30 ...
"
>
</
div
>
<
div
class
=
"
backdrop-blur-md
bg-white/30 ...
"
>
</
div
>
<
div
class
=
"
backdrop-blur-xl
bg-white/30 ...
"
>
</
div
>
To remove all of the backdrop filters on an element at once, use the
backdrop-filter-none
utility:
<
div
class
=
"
backdrop-blur-md backdrop-brightness-150
md:backdrop-filter-none
"
>
</
div
>
This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use
hover
:
backdrop-blur-lg
to only apply the
backdrop-blur-lg
utility on
hover
.
<
div
class
=
"
backdrop-blur-sm
hover:backdrop-blur-lg
"
>
</
div
>
For a complete list of all available state modifiers, check out the
Hover, Focus, & Other States
documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use
md:
backdrop-blur-lg
to apply the
backdrop-blur-lg
utility at only medium screen sizes and above.
<
div
class
=
"
backdrop-blur-sm
md:backdrop-blur-lg
"
>
</
div
>
To learn more, check out the documentation on
Responsive Design
,
Dark Mode
and
other media query modifiers
.
By default, Tailwind includes a handful of general purpose
backdrop-blur
utilities. You can customize these values by editing
theme.backdropBlur
or
theme.extend.backdropBlur
in your
tailwind.config.js
file.
module
.
exports
=
{
theme
:
{
extend
:
{
backdropBlur
:
{
xs
:
'2px'
,
}
}
}
}
Learn more about customizing the default theme in the
theme customization
documentation.
If you need to use a one-off
backdrop-blur
value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<
div
class
=
"
backdrop-blur-[2px]
"
>
</
div
>
Learn more about arbitrary value support in the
arbitrary values
documentation.