backdrop-filter: blur()

Ejemplos

Ejemplo básico

Usa utilidades como backdrop-blur-sm y backdrop-blur-lg para controlar el desenfoque de fondo de un elemento:

backdrop-blur-none

backdrop-blur-sm

backdrop-blur-md

<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-none ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-sm ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-md ..."></div>
</div>

Usando un valor personalizado

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

<div class="backdrop-blur-[2px] ...">
  <!-- ... -->
</div>

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

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

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

Diseño Responsive

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

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

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

Personalizando tu tema

Usa las variables de tema --blur-* para personalizar las utilidades backdrop blur en tu proyecto:

@theme {
  --blur-2xs: 2px; 
}

Ahora la utilidad backdrop-blur-2xs puede ser usada en tu marcado:

<div class="backdrop-blur-2xs">
  <!-- ... -->
</div>

Aprende más sobre la personalización de tu tema en la documentación del tema.