Blur and Opacity

Not all filters work with color. For example, a blur filter makes a photo look out of focus, whereas an opacity filter can make the subject partially transparent.

The blur filter blurs the element. Its value is set in pixels and must be 0px or higher.

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

The opacity filter sets the opacity of the element. It works exactly the same as the opacity property. The valid values range from 0 to 1 or from 0% to 100%.

.effect {
  filter: opacity(0.5); /* The subject is half opaque. */
  filter: opacity(0%); /* The subject is completely transparent. */
}

There can be performance differences between the filter and the opacity property. Both can use hardware acceleration, and their performance depends on the browser and the content being rendered. An opacity filter is not guaranteed to be faster than the opacity property.