DEV Community

Cover image for Backdrop-filter: La propiedad detrás del Glassmorfismo
Miriali López
Miriali López

Posted on

Backdrop-filter: La propiedad detrás del Glassmorfismo

Mucho se ha hablado desde el año pasado sobre el glassmorfismo como una tendencia de diseño predominante en este 2021, si bien hay posiciones encontradas al respecto; debido a que algunos afirman que esta tendencia pone en peligro la accesibilidad, también hay quienes plantean a esta variante del neumorfismo como una tendencia imparable, que trae un renovado look and feel que crea la sensación o apariencia de que el usuario ve a través de un cristal.

Para lograr tal fin es necesario cuidar de tres aspectos muy importantes en los elementos: 
1. Los bordes necesariamente deben ser claros y ligeros para reforzar ese efecto de vidrio esmerilado.
2. Los colores a utilizar de fondo deben ser vivos para resaltar la transparencia borrosa del contenedor y permitir la legibilidad del contenido.
3. El fondo del contenedor debe tener un efecto de desenfoque.
4. La sombra del elemento debe facilitar la identificación visual del mismo.

Ahora bien, para lograr ese efecto Css nos proporciona la propiedad Backdrop-filter que permite aplicar efectos gráficos como desenfoque o cambio de color a un área en concreto, es decir ésta propiedad solo se aplica a un contenedor sin que se vean afectados los elementos que están dentro del mismo, característica que marca una clara diferencia respecto a propiedades como filter, opacity o el resultado que podemos obtener al no especificar un fondo, configurarlo como semitransparente a través de rgba o aplicar una opacidad a todo el elemento.

Con backdrop-filter puedes aplicar efectos como: 

  • gray-scale()
  • sepia()
  • saturate() 
  • hue-rotate()
  • invert()
  • opacity()
  • brightness()
  • contrast()
  • blur()
  • drop-shadow() e incluso 
  • url() para filtros svg

Sin embargo para lograr este efecto del glassmorfismo solo es necesario usar blur() cuya función es aplicar un desenfoque gaussiano a la imagen de entrada. No obstante según Can I use esta propiedad aun no es compatible con todos los navegadores, razón por la que se recomienda usar la consulta @supports que te permitirá especificar declaraciones que dependen de la compatibilidad del navegador con backdrop-filter y con el cual podrás proporcionar un estilo completamente diferente al elemento para los navegadores que no lo admitan.

A fin de que puedas ver esta propiedad en acción te presento el siguiente ejemplo donde podrás ver todos los aspectos que te mencioné con anterioridad:

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay