backdrop-filter: grayscale()

Ejemplos

Ejemplo básico

Usa utilidades como backdrop-grayscale-50 y backdrop-grayscale para controlar el efecto de escala de grises aplicado al fondo de un elemento:

backdrop-grayscale-0

backdrop-grayscale-50

backdrop-grayscale

<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-grayscale-0 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-grayscale-50 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-grayscale-200 ..."></div>
</div>

Usando un valor personalizado

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

<div class="backdrop-grayscale-[0.5] ...">
  <!-- ... -->
</div>

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

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

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

Diseño Responsive

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

<div class="backdrop-grayscale md:backdrop-grayscale-0 ...">
  <!-- ... -->
</div>

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