Aplica filtros CSS en interfaces reales: funciones completas de filter, backdrop-filter legible y patrones de rendimiento útiles en producto.
filter altera el píxel final del elemento; backdrop-filter altera lo que hay detrás del elemento.
La familia principal de filtros incluye blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate y sepia.
El orden de funciones importa: cambiar el orden cambia el resultado visual.
Para UI productiva, prioriza legibilidad y rendimiento antes que efectos fuertes.
Qué hace cada función y cuándo conviene usarla.
Los filtros se aplican de izquierda a derecha. Por ejemplo, desaturar y luego subir contraste no produce el mismo resultado que hacerlo al revés.
Define presets por intención (hover, disabled, thumbnail vintage, etc.) en lugar de improvisar valores sueltos en cada componente.
Para que backdrop-filter se perciba, necesitas fondo semitransparente y algo visual detrás del panel (imagen, gradiente o contenido).
La receta más estable en UI real: blur moderado + borde sutil + contraste de texto verificado.
Aplica filtros CSS en interfaces reales: funciones completas de filter, backdrop-filter legible y patrones de rendimiento útiles en producto.
Código del tema: display: grid; gap: 1rem;
Qué hace cada función y cuándo conviene usarla.
.thumb {
filter: brightness(1.05) contrast(1.08) saturate(1.2);
}
.thumb.is-muted {
filter: grayscale(0.4) opacity(0.9);
}
.avatar {
filter: drop-shadow(0 8px 18px rgb(15 23 42 / 0.25));
}Los filtros se aplican de izquierda a derecha. Por ejemplo, desaturar y luego subir contraste no produce el mismo resultado que hacerlo al revés.
Define presets por intención (hover, disabled, thumbnail vintage, etc.) en lugar de improvisar valores sueltos en cada componente.
.a { filter: grayscale(100%) contrast(120%); }
.b { filter: contrast(120%) grayscale(100%); }Para que backdrop-filter se perciba, necesitas fondo semitransparente y algo visual detrás del panel (imagen, gradiente o contenido).
La receta más estable en UI real: blur moderado + borde sutil + contraste de texto verificado.
.glass {
background: rgb(255 255 255 / 0.2);
backdrop-filter: blur(10px) saturate(1.1);
border: 1px solid rgb(255 255 255 / 0.3);
}