Contenido del curso
backdrop-filter blur y grayscale en CSS
¿Alguna vez viste esas tarjetas translúcidas con el fondo borroso detrás y te preguntaste cómo se hacen? La respuesta está en backdrop filter, una propiedad de CSS que te permite modificar visualmente lo que hay detrás de un elemento sin tocar ese elemento de fondo. Es la clave para diseñar tarjetas emotivas, modernas y con esa estética glassmorphism que tanto se usa hoy.
¿Qué es backdrop filter en CSS y para qué sirve?
Es una propiedad CSS que aplica efectos visuales al área que está detrás de un elemento, no al elemento en sí. Esto cambia todo, porque puedes desenfocar, cambiar a escala de grises o ajustar otras características del fondo desde la misma tarjeta que está encima.
¿Qué hace exactamente backdrop filter? Aplica filtros visuales (como desenfoque o escala de grises) al fondo que se ve a través de un elemento semitransparente, sin modificar ese fondo directamente.
La magia está en que combinas transparencia con filtros, y el resultado se siente premium. [01:55]
¿Cómo preparar el HTML y el fondo del body?
Antes del efecto, necesitas una base. La estructura es mínima: un div con la clase card y un texto dentro que sea emotivo, porque la tarjeta lo va a pedir.
html
<div class="card"> Texto emotivo y emocional aquí </div>En el CSS, lo primero es darle al body una imagen de fondo. Puedes buscarla gratis en Pexels, copiar la URL directa al JPG y usarla así:
css body { background: url("tu-imagen.jpg") center/cover; height: 100vh; display: flex; align-items: center; justify-content: center; }
Con 100vh ocupas toda la altura visible, y con flex más align-items y justify-content centras la tarjeta tanto vertical como horizontalmente. [02:50]
¿Por qué usar 100vh y display flex juntos?
Porque 100vh te garantiza que el fondo cubra toda la pantalla, y flexbox te permite centrar la tarjeta sin cálculos manuales. Es la combinación más limpia para layouts centrados.
¿Cómo se estiliza la tarjeta antes de aplicar el filtro?
La tarjeta necesita ciertos detalles para verse bien antes de sumarle el efecto. Aquí entran las propiedades base:
El truco visual viene con el background de la tarjeta. En lugar de un color sólido, se usa RGBA con transparencia baja, por ejemplo rgba(55, 55, 55, 0.2). Ese 0.2 en el canal alfa deja pasar la imagen del fondo y prepara el terreno para el filtro. [04:10]
css .card { width: 300px; padding: 20px; font-size: 1.2rem; text-align: center; border-radius: 15px; color: white; background: rgba(55, 55, 55, 0.2); }
Hasta acá ya tienes una tarjeta translúcida, pero el fondo se sigue viendo nítido. Y eso, francamente, no emociona.
¿Cómo aplicar blur y grayscale con backdrop filter?
Aquí viene lo interesante. Con la tarjeta ya transparente, agregas la propiedad backdrop-filter y combinas dos efectos:
css .card { backdrop-filter: blur(10px) grayscale(50%); }
El valor blur(10px) aplica un desenfoque de 10 píxeles al fondo visible a través de la tarjeta. Blur significa literalmente desenfoque en inglés, y es lo que crea esa sensación de vidrio esmerilado.
El valor grayscale(50%) reduce la saturación del fondo a la mitad, llevándolo hacia tonos grises. Con 50% obtienes un punto medio entre la imagen original y un blanco y negro completo. [05:50]
¿Cuál es la diferencia entre filter y backdrop filter? Filter aplica efectos al elemento mismo (incluido su contenido). Backdrop filter solo afecta al fondo que se ve detrás del elemento, dejando el contenido de la tarjeta intacto.
¿Qué otras funciones acepta backdrop filter?
Además de blur y grayscale, esta propiedad acepta funciones como brightness, contrast, saturate, sepia, hue-rotate e invert. Puedes encadenarlas separándolas por espacios dentro de la misma declaración para componer efectos más complejos.
¿Por qué backdrop filter es tan potente para diseño web?
Porque te permite modificar el fondo desde el elemento de encima, sin duplicar imágenes, sin capas extra y sin JavaScript. Toda la lógica visual vive en una sola regla CSS, lo que mantiene tu código limpio y tu rendimiento alto.
Es ideal para:
La próxima vez que veas una interfaz con esa estética de vidrio borroso, ya sabes que detrás hay una línea de backdrop-filter haciendo todo el trabajo. ¿Qué tarjeta te animarías a diseñar tú con esta técnica? Cuéntame en los comentarios.
