La Propiedad BACKDROP-FILTER

La propiedad backdrop-filter en CSS te permite aplicar uno o más efectos visuales (como desenfoque, cambio de color, etc.) al área detrás de un elemento.

La propiedad backdrop-filter en CSS te permite aplicar uno o más efectos visuales (como desenfoque, cambio de color, etc.) al área detrás de un elemento. Es similar a la propiedad filter, pero en lugar de aplicarse al propio elemento, se aplica al fondo que queda detrás de él. Esto es especialmente útil para crear efectos de "vidrio esmerilado" o aplicar efectos a fondos semitransparentes.

Sintaxis Básica

La sintaxis básica para usar la propiedad backdrop-filter es la siguiente:

CSS
 
selector {
  backdrop-filter: valor;
}

Donde selector es el elemento HTML al que quieres aplicar el filtro de fondo y valor es uno o más de los valores que se describen a continuación.

Valores de la Propiedad backdrop-filter

La propiedad backdrop-filter puede tomar los siguientes valores:

1. none

Este es el valor predeterminado. No se aplica ningún filtro al fondo del elemento.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-image: url('https://via.placeholder.com/600x400');
    background-size: cover;
  }

  .overlay {
    background-color: rgba(255, 255, 255, 0.5); /* Fondo semitransparente */
    padding: 20px;
    border-radius: 5px;
  }
</style>
</head>
<body>

  <div class="overlay">
    Este es un elemento con un fondo semitransparente. El fondo detrás se ve claramente.
  </div>

</body>
</html>

En este ejemplo, el fondo detrás del div con la clase overlay se ve directamente a través de su transparencia.

2. <filter-function>

Puedes aplicar una o más funciones de filtro CSS al fondo del elemento. Las funciones de filtro comunes incluyen:

  • blur(radio): Aplica un efecto de desenfoque gaussiano al fondo. El radio especifica la cantidad de desenfoque (por ejemplo, 5px).

    Ejemplo:

    HTML
     
    <!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-image: url('https://via.placeholder.com/600x400');
    background-size: cover;
  }

  .overlay {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    border-radius: 5px;
    backdrop-filter: blur(10px); /* Aplica un desenfoque de 10px al fondo */
  }
</style>
</head>
<body>

  <div class="overlay">
    Este elemento tiene un fondo desenfocado.
  </div>

</body>
</html>

    En este caso, el fondo detrás del overlay aparecerá desenfocado.

  • brightness(porcentaje): Ajusta el brillo del fondo. Un valor de 100% es normal. Valores menores oscurecen, y valores mayores aclaran.

    Ejemplo:

    HTML
     
    /* ... (estructura HTML similar al ejemplo anterior) ... */
.overlay {
  /* ... otros estilos ... */
  backdrop-filter: brightness(150%); /* Aumenta el brillo del fondo */
}

  • contrast(porcentaje): Ajusta el contraste del fondo. Un valor de 100% es normal.

    Ejemplo:

    HTML
     
    /* ... (estructura HTML similar al ejemplo anterior) ... */
.overlay {
  /* ... otros estilos ... */
  backdrop-filter: contrast(80%); /* Disminuye el contraste del fondo */
}

  • grayscale(porcentaje): Convierte el fondo a escala de grises. Un valor de 100% lo convierte completamente a blanco y negro.

    Ejemplo:

    HTML
     
    /* ... (estructura HTML similar al ejemplo anterior) ... */
.overlay {
  /* ... otros estilos ... */
  backdrop-filter: grayscale(100%); /* Fondo en escala de grises */
}

  • hue-rotate(ángulo): Aplica una rotación de tono a los colores del fondo. El ángulo se especifica en grados (deg).

    Ejemplo:

    HTML
     
    /* ... (estructura HTML similar al ejemplo anterior) ... */
.overlay {
  /* ... otros estilos ... */
  backdrop-filter: hue-rotate(90deg); /* Rota los tonos del fondo */
}

  • invert(porcentaje): Invierte los colores del fondo. Un valor de 100% invierte completamente los colores.

    Ejemplo:

    HTML
     
    /* ... (estructura HTML similar al ejemplo anterior) ... */
.overlay {
  /* ... otros estilos ... */
  backdrop-filter: invert(100%); /* Colores del fondo invertidos */
}

  • opacity(porcentaje): Ajusta la opacidad del fondo. Un valor de 100% es completamente opaco, y 0% es completamente transparente.

    Ejemplo:

    HTML
     
    /* ... (estructura HTML similar al ejemplo anterior) ... */
.overlay {
  /* ... otros estilos ... */
  backdrop-filter: opacity(50%); /* Fondo con 50% de opacidad */
}

  • saturate(porcentaje): Ajusta la saturación de los colores del fondo. Un valor de 100% es normal. Valores mayores aumentan la intensidad del color, y valores menores la disminuyen.

    Ejemplo:

    HTML
     
    /* ... (estructura HTML similar al ejemplo anterior) ... */
.overlay {
  /* ... otros estilos ... */
  backdrop-filter: saturate(200%); /* Doble saturación del color del fondo */
}

  • sepia(porcentaje): Aplica un tono sepia al fondo. Un valor de 100% aplica un efecto sepia completo.

    Ejemplo:

    HTML
     
    /* ... (estructura HTML similar al ejemplo anterior) ... */
.overlay {
  /* ... otros estilos ... */
  backdrop-filter: sepia(80%); /* Tono sepia al fondo */
}

  • drop-shadow(desplazamiento-x desplazamiento-y radio-de-desenfoque color): Aplica una sombra paralela al fondo.

    Ejemplo:

    HTML
     
    /* ... (estructura HTML similar al ejemplo anterior) ... */
.overlay {
  /* ... otros estilos ... */
  backdrop-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* Sombra al fondo */
}

  • Múltiples Filtros: Puedes aplicar varios filtros a la vez separándolos con espacios.

    Ejemplo:

    CSS
     
    .overlay {
  /* ... otros estilos ... */
  backdrop-filter: blur(5px) brightness(120%) grayscale(20%);
}

3. url()

Permite hacer referencia a un filtro SVG definido en un archivo externo.

4. Valores Globales

Como otras propiedades CSS, backdrop-filter también acepta los valores globales: inherit, initial, revert, unset.

Ejemplos Prácticos

Ejemplo 1: Barra de Navegación Transparente con Fondo Desenfocado

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-image: url('https://via.placeholder.com/1200x800');
    background-size: cover;
    margin: 0;
    font-family: sans-serif;
  }

  nav {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1em;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Para navegadores Safari */
  }

  nav a {
    color: white;
    text-decoration: none;
    margin-right: 1em;
  }

  .contenido {
    padding: 2em;
    color: white;
    text-align: center;
    margin-top: 100px;
  }
</style>
</head>
<body>

  <nav>
    <a href="#">Inicio</a>
    <a href="#">Acerca de</a>
    <a href="#">Servicios</a>
    <a href="#">Contacto</a>
  </nav>

  <div class="contenido">
    <h1>Contenido Principal</h1>
    <p>Este contenido se muestra sobre una imagen de fondo.</p>
  </div>

</body>
</html>

En este ejemplo, la barra de navegación tiene un fondo ligeramente transparente, y la propiedad backdrop-filter: blur(10px); crea un efecto de desenfoque en la imagen de fondo que se ve a través de la barra de navegación. Se incluye el prefijo -webkit- para asegurar la compatibilidad con navegadores Safari.

Ejemplo 2: Modal con Fondo Oscurecido y Desenfocado

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: #f0f0f0;
    font-family: sans-serif;
  }

  .modal-fondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* Para navegadores Safari */
  }

  .modal-contenido {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
</style>
</head>
<body>

  <div class="modal-fondo">
    <div class="modal-contenido">
      <h2>Este es un Modal</h2>
      <p>El fondo detrás está oscurecido y desenfocado.</p>
    </div>
  </div>

</body>
</html>

Aquí, el modal-fondo cubre toda la pantalla con un fondo oscuro semitransparente. La propiedad backdrop-filter: blur(5px); desenfoca el contenido que se encuentra detrás del fondo del modal, ayudando a enfocar la atención en el contenido del modal.

Consideraciones Importantes

  • Contexto de Apilamiento: Para que backdrop-filter funcione, el elemento al que se aplica debe estar en un nuevo contexto de apilamiento. Esto a menudo se logra con propiedades como position: fixed, position: absolute o estableciendo un valor para z-index diferente de auto.
  • Transparencia: La propiedad backdrop-filter solo tendrá un efecto visible si el elemento tiene algún nivel de transparencia (por ejemplo, usando background-color: rgba(...)).
  • Rendimiento: Aplicar filtros, especialmente desenfoque, puede ser costoso en términos de rendimiento, especialmente si se aplica a elementos grandes o si se usan valores de radio de desenfoque muy altos. Úsala con moderación y prueba el rendimiento en diferentes dispositivos.
  • Compatibilidad del Navegador: La compatibilidad con backdrop-filter es buena en los navegadores modernos, pero puede no estar disponible en versiones más antiguas o en algunos navegadores menos comunes. Es recomendable verificar la compatibilidad antes de usarla en producción.

Conclusión

La propiedad backdrop-filter es una herramienta poderosa para crear efectos visuales modernos y atractivos en la web. Permite manipular el fondo detrás de los elementos de una manera sencilla y elegante, abriendo un mundo de posibilidades para el diseño de interfaces de usuario. ¡Experimenta con las diferentes funciones de filtro y descubre cómo puedes mejorar la estética de tus proyectos web!