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

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

backdrop-filter: blur(5px);

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

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

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

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

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

See the Pen Размытие фона - backdrop-filter: blur(5px) by Websitio (@Websitio) on CodePen.

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

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

/* фильтр URL в SVG */
backdrop-filter: url(common-filters.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%);