Размытость и непрозрачность, blur и opacity

Не все фильтры работают с цветом. Например, фильтр размытости создаёт у фотографии эффект расфокусировки, а фильтр непрозрачности может сделать объект частично прозрачным.

Фильтр blur задаёт размытость объекта. Его значение задаётся в пикселях от 0px и выше.

.effect {
  filter: blur(5px); /* размытость в 5px */
}

Фильтр opacity задаёт уровень непрозрачности объекта. Работает точно так же, как свойство opacity. Допустимые значения от 0 до 1 или от 0% до 100%.

.effect {
  filter: opacity(0.5); /* объект наполовину непрозрачный */
  filter: opacity(0%); /* полностью прозрачный объект */
}

Между фильтром и свойством opacity всё же есть «невидимое» отличие. Некоторые браузеры используют аппаратное ускорение для отрисовки фильтров, а для свойства opacity ускорение не используется. Поэтому применение фильтра opacity может существенно улучшить производительность по сравнению с аналогичным свойством.