🎨 Utilidades de Filtros y Efectos en Tailwind CSS

Tailwind proporciona clases utilitarias para aplicar efectos visuales como desenfoques, mezcla de colores y transformaciones visuales tanto en los elementos como en sus fondos.

🧪 Filtros (filter-*)

Estas utilidades aplican efectos directamente sobre un elemento. Incluyen desenfoques, brillo, saturación, escala de grises y más. Para activarlos se usa la clase filter junto con las utilidades específicas.

Clase Tailwind Equivalente CSS Imagen Original Imagen con Filtro
filter filter: var(--tw-filter);
filter-none filter: none;
blur-sm blur(4px)
blur-lg blur(16px)
blur-3xl blur(64px)
blur-[2px] blur(2px)
blur-[10px] blur(10px)
brightness-50 filter: brightness(0.5);
brightness-100 filter: brightness(1);
brightness-150 filter: brightness(1.5);
brightness-[0.8] filter: brightness(0.8);
brightness-[1.25] filter: brightness(1.25);
contrast-50 filter: contrast(0.5);
contrast-100 filter: contrast(1);
contrast-200 filter: contrast(2);
contrast-[1.25] filter: contrast(1.25);
contrast-[0.75] filter: contrast(0.75);
grayscale filter: grayscale(1);
grayscale-0 filter: grayscale(0);
invert filter: invert(1);
invert-0 filter: invert(0);
sepia filter: sepia(1);
sepia-0 filter: sepia(0);
hue-rotate-15 filter: hue-rotate(15deg);
hue-rotate-60 filter: hue-rotate(60deg);
hue-rotate-180 filter: hue-rotate(180deg);
hue-rotate-[30deg] filter: hue-rotate(30deg);
hue-rotate-[90deg] filter: hue-rotate(90deg);

🌫️ Filtros de Fondo (backdrop-*)

Estas clases aplican efectos visuales sobre el fondo de un elemento, como desenfoque, brillo o contraste. Se usan comúnmente junto a fondos semitransparentes para lograr efectos de vidrio o cristal.

Clase Tailwind Equivalente CSS Imagen con Filtro
backdrop-filter filter: var(--tw-backdrop-filter);
backdrop-filter-none backdrop-filter: none;
backdrop-blur-sm backdrop-filter: blur(4px);
backdrop-blur-lg backdrop-filter: blur(16px);
backdrop-blur-3xl backdrop-filter: blur(64px);
backdrop-blur-[2px] backdrop-filter: blur(2px);
backdrop-blur-[10px] backdrop-filter: blur(10px);
backdrop-brightness-50 backdrop-filter: brightness(0.5);
backdrop-brightness-100 backdrop-filter: brightness(1);
backdrop-brightness-150 backdrop-filter: brightness(1.5);
backdrop-brightness-[0.8] backdrop-filter: brightness(0.8);
backdrop-brightness-[1.25] backdrop-filter: brightness(1.25);
backdrop-contrast-50 backdrop-filter: contrast(0.5);
backdrop-contrast-100 backdrop-filter: contrast(1);
backdrop-contrast-200 backdrop-filter: contrast(2);
backdrop-contrast-[1.25] backdrop-filter: contrast(1.25);
backdrop-contrast-[0.75] backdrop-filter: contrast(0.75);
backdrop-grayscale backdrop-filter: grayscale(1);
backdrop-grayscale-0 backdrop-filter: grayscale(0);
backdrop-invert backdrop-filter: invert(1);
backdrop-invert-0 backdrop-filter: invert(0);
backdrop-sepia backdrop-filter: sepia(1);
backdrop-sepia-0 backdrop-filter: sepia(0);
backdrop-hue-rotate-15 backdrop-filter: hue-rotate(15deg);
backdrop-hue-rotate-60 backdrop-filter: hue-rotate(60deg);
backdrop-hue-rotate-180 backdrop-filter: hue-rotate(180deg);
backdrop-hue-rotate-[30deg] backdrop-filter: hue-rotate(30deg);
backdrop-hue-rotate-[90deg] backdrop-filter: hue-rotate(90deg);

🎭 Mezcla de Colores (mix-blend-*)

Estas utilidades definen cómo se mezcla un elemento con el fondo, usando modos como multiply, overlay, screen y más. Son útiles para crear efectos visuales complejos entre capas.

Clase Tailwind Equivalente CSS
mix-blend-normal mix-blend-mode: normal;
mix-blend-multiply mix-blend-mode: multiply;
mix-blend-screen mix-blend-mode: screen;
mix-blend-overlay mix-blend-mode: overlay;
mix-blend-darken mix-blend-mode: darken;
mix-blend-lighten mix-blend-mode: lighten;
mix-blend-color-dodge mix-blend-mode: color-dodge;
mix-blend-color-burn mix-blend-mode: color-burn;
mix-blend-hard-light mix-blend-mode: hard-light;
mix-blend-soft-light mix-blend-mode: soft-light;
mix-blend-difference mix-blend-mode: difference;
mix-blend-exclusion mix-blend-mode: exclusion;
mix-blend-hue mix-blend-mode: hue;
mix-blend-saturation mix-blend-mode: saturation;
mix-blend-color mix-blend-mode: color;
mix-blend-luminosity mix-blend-mode: luminosity;

🖌️ Mezcla de Fondos (bg-blend-*)

Permite controlar cómo se mezclan múltiples capas de fondo dentro del mismo elemento. Ideal para superponer imágenes y colores con distintos modos de fusión.

Clase Tailwind Equivalente CSS
bg-blend-normal background-blend-mode: normal;
bg-blend-multiply background-blend-mode: multiply;
bg-blend-screen background-blend-mode: screen;
bg-blend-overlay background-blend-mode: overlay;
bg-blend-darken background-blend-mode: darken;
bg-blend-lighten background-blend-mode: lighten;
bg-blend-color-dodge background-blend-mode: color-dodge;
bg-blend-color-burn background-blend-mode: color-burn;
bg-blend-hard-light background-blend-mode: hard-light;
bg-blend-soft-light background-blend-mode: soft-light;
bg-blend-difference background-blend-mode: difference;
bg-blend-exclusion background-blend-mode: exclusion;
bg-blend-hue background-blend-mode: hue;
bg-blend-saturation background-blend-mode: saturation;
bg-blend-color background-blend-mode: color;
bg-blend-luminosity background-blend-mode: luminosity;