Создание размытых фонов с помощью CSS Backdrop-Filter

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

Понимание разницы между CSS Backdrop-Filter и Filter

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

/* Размывает элемент и его содержимое */
.with-filter {
  filter: blur(10px);
}

/* Размывает только фон за элементом */
.with-backdrop-filter {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.2);
}

Элемент, использующий backdrop-filter, должен иметь прозрачность для проявления эффекта — либо через opacity, либо через полупрозрачные фоны.

Создание гласморфизма с помощью CSS Blur()

Гласморфизм основывается на трех ключевых компонентах: прозрачность, размытие и тонкие границы. Вот минимальная реализация:

.glass-card {
  backdrop-filter: blur(16px);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

<div class="glass-card">
  <h2>Frosted Glass Effect</h2>
  <p>Content remains perfectly sharp</p>
</div>

Для более выраженного эффекта матового стекла комбинируйте несколько backdrop-фильтров:

.frosted-panel {
  backdrop-filter: blur(20px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.15);
}

Поддержка браузерами

CSS backdrop-filter теперь имеет базовую поддержку во всех основных браузерах:

• Chrome 76+ ✅ Полная поддержка
• Edge (Chromium) 79+ ✅ Полная поддержка
• Firefox 103+ ✅ Полная поддержка
• Safari 9+ ✅ Полная поддержка (с префиксом -webkit- до версии 17)
• Internet Explorer ❌ Нет поддержки

Safari 17 и более поздние версии больше не требуют префикса -webkit-. Для старых версий Safari включайте версию с префиксом:

.glass-element {
  -webkit-backdrop-filter: blur(10px); /* Safari 16 и старше */
  backdrop-filter: blur(10px);
}

Вопросы производительности

Backdrop-фильтры запускают GPU-ускоренную композицию, но могут влиять на производительность на мобильных устройствах. Следуйте этим стратегиям оптимизации:

.optimized-blur {
  backdrop-filter: blur(12px);
  will-change: backdrop-filter; /* Подсказка для оптимизации браузера */
  transform: translateZ(0); /* Принудительное создание GPU-слоя */
}

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

@media (max-width: 768px) and (hover: none) {
  .glass-card {
    backdrop-filter: blur(8px); /* Уменьшенное размытие на сенсорных устройствах */
  }
}

Доступность и пользовательские предпочтения

Уважайте пользовательские предпочтения по снижению прозрачности и движения:

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.95);
  }
}

@media (prefers-contrast: high) {
  .glass-card {
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.5);
  }
}

Обеспечьте достаточные коэффициенты цветового контраста для текста на размытых фонах. WCAG AA требует 4.5:1 для обычного текста и 3:1 для крупного текста.

Техники отката для устаревших браузеров

Для браузеров без поддержки backdrop-filter реализуйте плавную деградацию:

.glass-fallback {
  /* Откат для неподдерживаемых браузеров */
  background-color: rgba(255, 255, 255, 0.85);
  
  /* Современные браузеры с поддержкой */
  @supports (backdrop-filter: blur(10px)) {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
  }
}

Альтернативный подход с использованием псевдоэлементов для старых браузеров:

.legacy-blur {
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
}

.legacy-blur::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(10px);
  z-index: -1;
}

@supports (backdrop-filter: blur(10px)) {
  .legacy-blur::before {
    display: none;
  }
  .legacy-blur {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.2);
  }
}

Заключение

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

Часто задаваемые вопросы

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..