Как заблюрить фон CSS

Для заблюривания фона в CSS можно использовать свойство backdrop-filter. Например:

.element {
  backdrop-filter: blur(5px);
}

Это свойство применяет эффект размытия к заднему фону элемента. Однако, это свойство не поддерживается во всех браузерах, поэтому для кроссбраузерной совместимости можно использовать альтернативный подход с помощью псевдоэлемента ::before или ::after:

.element {
  position: relative;
}

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  z-index: -1;
}

Этот подход создает псевдоэлемент, который занимает всю площадь элемента и применяет размытие к своему фону. Задний фон элемента остается неизменным.