backdrop-filter
En esta página
| Clase | Propiedades CSS |
|---|---|
backdrop-filter-none |
backdrop-filter: none; |
backdrop-filter-(<custom-property>) |
backdrop-filter: var(<custom-property>); |
backdrop-filter-[<value>] |
backdrop-filter: <value>; |
Examples#
Basic example#
Use utilities like backdrop-blur-xs and backdrop-grayscale to apply filters to an element's backdrop:
{
backdrop-blur-xs
backdrop-grayscale
combined
<!-- [!code classes:backdrop-blur-xs,backdrop-grayscale] -->
<div class="bg-[url(/img/mountains.jpg)] ...">
<div class="backdrop-blur-xs ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)] ...">
<div class="backdrop-grayscale ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)] ...">
<div class="backdrop-blur-xs backdrop-grayscale ..."></div>
</div>
You can combine the following backdrop filter utilities: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia.
Removing filters#
Use the backdrop-filter-none utility to remove all of the backdrop filters applied to an element:
<!-- [!code classes:md:backdrop-filter-none] -->
<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>