Desenfoque y opacidad: blur y opacity

No todos los filtros modifican el color. Por ejemplo, el filtro de desenfoque hace que una fotografía parezca fuera de foco, mientras que el de opacidad puede volver un elemento parcialmente transparente.

El filtro blur define el desenfoque del elemento. Su valor puede expresarse en píxeles a partir de 0px.

.effect {
  filter: blur(5px); /* desenfoque de 5px */
}

El filtro opacity define el nivel de opacidad del elemento. Produce el mismo efecto que la propiedad opacity. Admite valores de 0 a 1 o de 0% a 100%.

.effect {
  filter: opacity(0.5); /* elemento con un 50% de opacidad */
  filter: opacity(0%); /* elemento completamente transparente */
}

Entre el filtro y la propiedad opacity puede haber diferencias «invisibles» de rendimiento. Según el navegador y el contenido, ambos pueden usar aceleración por hardware. El filtro no garantiza un mejor rendimiento que la propiedad.