backdrop-filter

Ejemplos

Ejemplo básico

Usa utilidades como backdrop-blur-xs y backdrop-grayscale para aplicar filtros al fondo de un elemento:

backdrop-blur-xs

backdrop-grayscale

combined

<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>

Puedes combinar las siguientes utilidades de filtro de fondo: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, y sepia.

Eliminando filtros

Usa la utilidad backdrop-filter-none para eliminar todos los filtros de fondo aplicados a un elemento:

<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>

Usando un valor personalizado

Usa la sintaxis backdrop-filter-[<value>] para establecer el filtro de fondo basado en un valor completamente personalizado:

<div class="backdrop-filter-[url('filters.svg#filter-id')] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis backdrop-filter-(<custom-property>) :

<div class="backdrop-filter-(--my-backdrop-filter) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para backdrop-filter-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Aplicando en hover

Prefija una utilidad backdrop-filter con una variante como hover:* para aplicar la utilidad solo en ese estado:

<div class="backdrop-blur-sm hover:backdrop-filter-none ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.

Responsive design

Prefija una utilidad backdrop-filter con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="backdrop-blur-sm md:backdrop-filter-none ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.