Как заблюрить фон 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;
}

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

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как заблюрить фон CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали