Filtros y efectos visuales

Filtros de desenfoque con blur-*

Los filtros CSS permiten modificar la apariencia visual de los elementos sin alterar el contenido original. Tailwind CSS agrupa las utilidades de filtro en clases directas que aplican las funciones nativas de CSS filter de forma inmediata.

El filtro de desenfoque es uno de los más utilizados. La clase blur-* aplica un efecto de desenfoque gaussiano al elemento completo, incluyendo su contenido e hijos:

• blur-none: sin desenfoque
• blur-xs: desenfoque de 2px
• blur-sm: desenfoque de 4px
• blur: desenfoque por defecto de 8px
• blur-md: desenfoque de 12px
• blur-lg: desenfoque de 16px
• blur-xl: desenfoque de 24px
• blur-2xl: desenfoque de 40px
• blur-3xl: desenfoque de 64px

Aplicar desenfoque a una imagen

<div class="flex gap-4">
  <img src="foto.jpg" alt="Original" class="size-40 rounded-lg object-cover" />
  <img src="foto.jpg" alt="Blur sm" class="size-40 rounded-lg object-cover blur-sm" />
  <img src="foto.jpg" alt="Blur lg" class="size-40 rounded-lg object-cover blur-lg" />
</div>

El filtro blur-* se aplica sobre el propio elemento. Para desenfocar el fondo que se ve detrás de un elemento semitransparente, se utiliza backdrop-blur-* en su lugar.

Filtros de brillo, contraste y saturación

Tailwind CSS proporciona utilidades para ajustar las propiedades tonales de cualquier elemento, de forma similar a los controles de edición fotográfica.

Brillo con brightness-*

La clase brightness-* controla el nivel de luminosidad del elemento. Los valores por debajo de 100 oscurecen y por encima aclaran:

<div class="flex gap-4">
  <img src="foto.jpg" alt="Oscura" class="size-32 rounded-lg object-cover brightness-50" />
  <img src="foto.jpg" alt="Normal" class="size-32 rounded-lg object-cover brightness-100" />
  <img src="foto.jpg" alt="Clara" class="size-32 rounded-lg object-cover brightness-150" />
</div>

Contraste con contrast-*

La clase contrast-* incrementa o reduce la diferencia tonal entre las zonas claras y oscuras:

<img src="foto.jpg" alt="Bajo contraste" class="w-64 rounded-lg contrast-50" />
<img src="foto.jpg" alt="Alto contraste" class="w-64 rounded-lg contrast-150" />

Saturación con saturate-*

La saturación controla la intensidad del color. Un valor de 0 produce una imagen en escala de grises, mientras que valores superiores a 100 intensifican los colores:

<img src="foto.jpg" alt="Desaturada" class="w-64 rounded-lg saturate-0" />
<img src="foto.jpg" alt="Normal" class="w-64 rounded-lg saturate-100" />
<img src="foto.jpg" alt="Saturada" class="w-64 rounded-lg saturate-200" />

Los filtros de brillo, contraste y saturación se pueden combinar en el mismo elemento. Tailwind CSS los compone automáticamente en una única declaración CSS filter.

Filtros de escala de grises, sepia e inversión

Estos filtros aplican transformaciones de color completas al elemento, modificando toda su paleta cromática.

Escala de grises con grayscale

<div class="flex gap-4">
  <img src="foto.jpg" alt="Color" class="size-40 rounded-lg object-cover" />
  <img src="foto.jpg" alt="Grises" class="size-40 rounded-lg object-cover grayscale" />
</div>

La clase grayscale convierte el elemento completamente a blanco y negro. Para revertir el efecto se utiliza grayscale-0.

Sepia

<img src="foto.jpg" alt="Sepia" class="w-64 rounded-lg sepia" />

El filtro sepia aplica un tono marrón cálido que simula el aspecto de fotografías antiguas.

Rotación de tono con hue-rotate-*

La clase hue-rotate-* desplaza todos los colores del elemento a lo largo del círculo cromático en grados:

<div class="flex gap-4">
  <img src="foto.jpg" alt="Original" class="size-32 rounded-lg object-cover" />
  <img src="foto.jpg" alt="90 grados" class="size-32 rounded-lg object-cover hue-rotate-90" />
  <img src="foto.jpg" alt="180 grados" class="size-32 rounded-lg object-cover hue-rotate-180" />
</div>

Inversión con invert

<img src="foto.jpg" alt="Invertida" class="w-64 rounded-lg invert" />

La clase invert invierte completamente los valores de color, convirtiendo los claros en oscuros y viceversa. Es útil para adaptar iconos o gráficos al modo oscuro.

Combinación de filtros

Se pueden aplicar múltiples filtros simultáneamente sobre un mismo elemento:

<img
  src="foto.jpg"
  alt="Efecto vintage"
  class="w-64 rounded-lg sepia brightness-110 contrast-75 saturate-125"
/>

Este ejemplo combina sepia con ajustes de brillo, contraste y saturación para lograr un efecto vintage personalizado.

Filtros de fondo con backdrop-*

Las utilidades backdrop-* aplican filtros al área que se encuentra detrás de un elemento semitransparente, en lugar de al propio elemento. Utilizan la propiedad CSS backdrop-filter y son fundamentales para crear efectos de vidrio esmerilado y superposiciones.

Backdrop blur (efecto glassmorphism)

<div class="relative h-64 overflow-hidden rounded-xl">
  <img src="paisaje.jpg" alt="Fondo" class="size-full object-cover" />
  <div class="absolute inset-0 flex items-center justify-center backdrop-blur-md bg-white/20">
    <p class="text-xl font-semibold text-white">Efecto vidrio esmerilado</p>
  </div>
</div>

La combinación de backdrop-blur-md con un fondo semitransparente bg-white/20 crea el popular efecto glassmorphism, donde el contenido de fondo se muestra desenfocado a través del panel.

Otros filtros de fondo

Todas las utilidades de filtro tienen su equivalente backdrop-*:

<!-- Fondo oscurecido -->
<div class="backdrop-brightness-50 bg-black/10">
  Contenido sobre fondo oscuro
</div>

<!-- Fondo desaturado -->
<div class="backdrop-grayscale bg-white/30">
  Fondo en blanco y negro
</div>

<!-- Fondo con contraste reducido -->
<div class="backdrop-contrast-75 bg-white/20">
  Fondo suavizado
</div>

Los filtros backdrop-* solo son visibles cuando el propio elemento tiene algún grado de transparencia. Si el fondo del elemento es completamente opaco, el efecto no será perceptible.

Barra de navegación con efecto cristal

Un caso de uso habitual es aplicar el efecto de vidrio en la barra de navegación para que el contenido se vea difuminado al hacer scroll:

<nav class="fixed top-0 z-50 w-full border-b border-white/10 backdrop-blur-lg bg-white/70">
  <div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
    <span class="text-lg font-bold text-gray-900">MiApp</span>
    <div class="flex gap-6 text-sm text-gray-700">
      <a href="#" class="hover:text-gray-900">Inicio</a>
      <a href="#" class="hover:text-gray-900">Productos</a>
      <a href="#" class="hover:text-gray-900">Contacto</a>
    </div>
  </div>
</nav>

Opacidad y modos de fusión

Las utilidades de opacidad y modos de fusión controlan cómo se integra visualmente un elemento con su entorno.

Opacidad con opacity-*

La clase opacity-* establece la transparencia global del elemento, afectando tanto al contenido como al fondo:

<div class="flex gap-4">
  <div class="size-24 rounded-lg bg-blue-500 opacity-100">100%</div>
  <div class="size-24 rounded-lg bg-blue-500 opacity-75">75%</div>
  <div class="size-24 rounded-lg bg-blue-500 opacity-50">50%</div>
  <div class="size-24 rounded-lg bg-blue-500 opacity-25">25%</div>
</div>

Modos de fusión con mix-blend-*

Los modos de fusión determinan cómo se mezclan los colores de un elemento con los del fondo. Tailwind CSS ofrece todas las funciones de mix-blend-mode de CSS:

<div class="relative h-48 bg-gradient-to-r from-blue-500 to-purple-500">
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="size-32 rounded-full bg-yellow-400 mix-blend-multiply"></div>
  </div>
</div>

Los modos más utilizados incluyen:

• mix-blend-multiply: oscurece combinando colores, ideal para superposiciones tonales
• mix-blend-screen: aclara los colores, efecto inverso a multiply
• mix-blend-overlay: combina multiply y screen según la luminosidad del fondo
• mix-blend-soft-light: efecto suave similar a iluminación difusa

Backdrop opacity

La clase backdrop-opacity-* reduce la opacidad únicamente del fondo filtrado, sin afectar al contenido del elemento:

<div class="backdrop-blur-sm backdrop-opacity-60 bg-white/30 p-6 rounded-lg">
  <p class="text-gray-900">Contenido nítido sobre fondo difuminado con opacidad reducida.</p>
</div>

Utilidades mask-* para recorte visual

Tailwind CSS incluye las utilidades mask-* que permiten aplicar máscaras CSS a los elementos. Las máscaras definen qué partes del elemento son visibles y cuáles quedan ocultas, utilizando imágenes o degradados como forma de recorte.

Máscara con degradado lineal

<img
  src="foto.jpg"
  alt="Foto con máscara"
  class="w-64 mask-linear mask-from-100 mask-to-0 mask-dir-to-b"
/>

Este ejemplo aplica una máscara que desvanece la imagen de arriba hacia abajo, haciendo que la parte inferior sea gradualmente transparente.

Máscara radial

<img
  src="foto.jpg"
  alt="Viñeteo"
  class="w-64 mask-radial mask-from-100 mask-to-0"
/>

La máscara radial produce un efecto de viñeteo donde el centro de la imagen es completamente visible y los bordes se desvanecen progresivamente.

Las utilidades mask-* son composables con el resto de filtros y efectos de Tailwind CSS, permitiendo crear composiciones visuales avanzadas sin necesidad de software de edición gráfica.