filter

Ejemplos

Ejemplo básico

Utiliza utilidades como blur-xs y grayscale para aplicar filtros a un elemento:

blur-xs

grayscale

combinado

<img class="blur-xs" src="/img/mountains.jpg" /><img class="grayscale" src="/img/mountains.jpg" /><img class="blur-xs grayscale" src="/img/mountains.jpg" />

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

Eliminar filtros

Utiliza la utilidad filter-none para eliminar todos los filtros aplicados a un elemento:

<img class="blur-md brightness-150 invert md:filter-none" src="/img/mountains.jpg" />

Usar un valor personalizado

Usa la sintaxis filter-[<value>] para establecer el/la filtro basándose en un valor completamente personalizado:

<img class="filter-[url('filters.svg#filter-id')] ..." src="/img/mountains.jpg" />

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

<img class="filter-(--my-filter) ..." src="/img/mountains.jpg" />

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

Aplicar al pasar el mouse

Antepone a la utilidad filter el prefijo de una variante como hover:* para aplicar la utilidad únicamente en ese estado:

<img class="blur-sm hover:filter-none ..." src="/img/mountains.jpg" />

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

Diseño responsivo

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

<img class="blur-sm md:filter-none ..." src="/img/mountains.jpg" />

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