Размытый фон на CSS и другие backdrop-filter

Дизайнеры любят размытый фон. И дело легко решалось бы вставкой сразу размытой картинки. Но не тут-то было. Картинка должна меняться или при наведении переставать быть размытой. Грузить 2 картинки это слишком жестоко. Так нам приходилось поступать раньше. Но теперь можно сделать всё хорошо всего одной строчкой в CSS

backdrop-filter: blur(5px);

Вот ссылка на MDN

CSS свойство backdrop-filter позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.

Теперь к делу!

Зададим фоновую картинку для body или для любого блока. Поверх сделаем другой блок, например, с классом.text, пропишем ему размеры так, чтобы он занимал только какую-то часть блока,чтобы было видно каким был изначальный фон и что произошло потом. Чтобы увидеть размытие, верхнему блоку нужно задать фоновый цвет в формате, поддерживающем альфа-канал. Я возьму полупрозрачный белый в таком виде:background: #fff5;.

И теперь осталос добавить волшебное свойствоbackdrop-filter со значениемblur(10px). Чем больше число, тем сильнее степень размытия.

Другие функции backdrop-filter

Кроме размытия у свойства backdrop-filter есть и другие возможности:

/* фильтр URL в SVG */
backdrop-filter: url(commonfilters.svg#filter);

/* значения функции фильтра */
backdrop-filter: blur(2px); /* размытие*/
backdrop-filter: brightness(60%); /* яркость */
backdrop-filter: contrast(40%); /* контраст */
backdrop-filter: drop-shadow(4px 4px 10px blue); /* тень, но в отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом. */
backdrop-filter: grayscale(30%); /* тона серого */
backdrop-filter: hue-rotate(120deg); /* поворот цвета */
backdrop-filter: invert(70%); /* инверсия */
backdrop-filter: opacity(20%); /* прозрачность */
backdrop-filter: sepia(90%); /* сепия (эффект старинных фотографий) */
backdrop-filter: saturate(80%); /* насыщенность */

К элементу можно применить одновременно несколько функций

  backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);