Как размыть фон CSS

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

background-image: url('image.jpg');
backdrop-filter: blur(5px);

Это свойство размывает все, что находится за элементом, на котором оно применено. Однако, оно не поддерживается всеми браузерами, поэтому для более широкой совместимости можно использовать псевдоэлементы ::before и ::after и применять к ним backdrop-filter. Например:

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