backdrop-filter: sepia()

Ejemplos

Ejemplo básico

Utiliza utilidades como backdrop-sepia y backdrop-sepia-50 para controlar el efecto sepia aplicado al fondo de un elemento:

backdrop-sepia-0

backdrop-sepia-50

backdrop-sepia

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

Usar un valor personalizado

Usa la sintaxis backdrop-sepia-[<value>] para establecer el/la sepia de fondo basándose en un valor completamente personalizado:

<div class="backdrop-sepia-[.25] ...">  <!-- ... --></div>

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

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

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

Diseño responsivo

Antepone a la utilidad backdrop-filter: sepia() el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.