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 subject. Its value is set in pixels of 0px or higher.

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

The opacity filter does the opposite: it sets the opacity of the subject. It works exactly the same as the opacity property. The valid values range from0 to1 or from 0% to 100%.

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

There is a distinction between the filter and opacity property that you cannot see. Some browsers use hardware acceleration to render filters, but acceleration is not used for the opacity property. Therefore, if you apply an opacity filter, it can have significantly better performance over a similar property.