Glassmorphism и backdrop-filter: blur в CSS - как сделать стеклянный эффект без боли

Эффект «матового стекла» захватил интерфейсы ещё со времён macOS Big Sur и iOS 15. Сегодня Glassmorphism встречается в дашбордах, лендингах и мобильных приложениях - везде, где нужно создать ощущение глубины и лёгкости. Но реализовать его корректно умеют далеко не все: одни разработчики получают размытый фон, который виснет на мобильных, другие - карточку без тени и без «стекла».

В этой статье вы узнаете, как работает backdrop-filter: blur() в CSS, почему он иногда не срабатывает, как избежать типичных ошибок и написать glassmorphism-компонент, который работает во всех современных браузерах.

Кому поможет: фронтенд-разработчикам, верстальщикам, дизайнерам, которые хотят перенести макет в код.

Что такое Glassmorphism и backdrop-filter

Glassmorphism - стиль UI, имитирующий матовое стекло: полупрозрачный фон, размытие содержимого позади элемента, тонкая светлая обводка и лёгкая тень.

За размытие отвечает CSS-свойство backdrop-filter. Оно применяет графические эффекты к области позади элемента - в отличие от filter, который влияет на сам элемент.

.glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */
}

Помимо blur, backdrop-filter поддерживает brightness, contrast, saturate, grayscale и другие функции - но для glassmorphism используют именно blur.

Почему backdrop-filter иногда не работает

Это самая частая причина вопросов на Stack Overflow. Вот полный список причин:

1. Нет вендорного префикса для Safari

Safari требует -webkit-backdrop-filter. Без него на iOS и macOS Safari эффект не появится.

/* Всегда пишите оба варианта */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

2. Элемент не имеет прозрачного фона

Если у элемента background: white - размытие скрыто под непрозрачным фоном. Нужен rgba или hsla с альфа-каналом.

/* Неправильно */
background: #ffffff;

/* Правильно */
background: rgba(255, 255, 255, 0.15);

3. Нет контента позади элемента

backdrop-filter размывает то, что находится под элементом в стеке. Если фон body - однотонный цвет, размытие будет незаметно. Нужен градиент, изображение или другие элементы.

4. Родитель с overflow: hidden или will-change

Некоторые свойства на родительском элементе создают новый stacking context и ломают backdrop-filter. Особенно коварен will-change: transform на предке.

5. Браузер не поддерживает свойство

Firefox поддерживает backdrop-filter начиная с версии 103 (при включённом флаге ранее). Проверяйте актуальную совместимость на caniuse.com.

Частые ошибки при реализации Glassmorphism

Пошаговое создание glassmorphism-карточки

Шаг 1 - Подготовьте фон

Эффект виден только на сложном фоне. Добавьте градиент или изображение на body:

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

Шаг 2 - Создайте базовую карточку

.glass-card {
  width: 320px;
  padding: 32px;
  border-radius: 16px;

  /* Ключевая часть: полупрозрачный фон */
  background: rgba(255, 255, 255, 0.15);

  /* Размытие заднего фона */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Тонкая светлая обводка - имитация грани стекла */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* Тень для глубины */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

Шаг 3 - Добавьте типографику

.glass-card h2 {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0 8px;
}

.glass-card p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.6;
}

Шаг 4 - Добавьте fallback для старых браузеров

/* Запасной вариант без blur */
.glass-card {
  background: rgba(255, 255, 255, 0.6);
}

/* Если браузер поддерживает backdrop-filter - применяем */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

Шаг 5 - Итоговый HTML

<div class="glass-card">
  <h2>Glassmorphism Card</h2>
  <p>Это пример карточки с эффектом матового стекла на CSS.</p>
  <button class="glass-btn">Подробнее</button>
</div>

Расширенные примеры

Glassmorphism-навигация

.glass-nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 100;
}

Комбинация blur и saturate - стандартный приём Apple: насыщенность усиливает ощущение стекла.

Тёмная версия (Dark Glassmorphism)

.glass-dark {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: #fff;
}

Производительность: когда blur тормозит

backdrop-filter: blur() - дорогое свойство. Браузер перерисовывает слой при каждом изменении фона. Советы:

/* Помогает браузеру создать отдельный compositing layer заранее */
.glass-card {
  will-change: backdrop-filter; /* Использовать осторожно */
  transform: translateZ(0);    /* Альтернативный способ */
}

Не добавляйте will-change на десятки элементов - это съест память. Применяйте только к анимированным glassmorphism-элементам.

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

Почему backdrop-filter не работает в Firefox? Firefox поддерживает backdrop-filter с версии 103. В более старых версиях его нужно было включать через layout.css.backdrop-filter.enabled в about:config. Сейчас большинство пользователей на актуальных версиях - проблема почти ушла.

Можно ли использовать backdrop-filter на видео? Да. Если под элементом воспроизводится <video>, размытие будет применяться к текущему кадру в реальном времени. Это красиво, но нагружает GPU.

Почему blur выглядит по-разному на Mac и Windows? Рендеринг шрифтов и субпиксельное сглаживание отличаются. Кроме того, на macOS Safari использует аппаратное ускорение иначе. Тестируйте на реальных устройствах.

Как сделать blur только по одной стороне? backdrop-filter применяется ко всей области элемента. Обходной путь - использовать псевдоэлемент ::before с backdrop-filter и clip-path.

Влияет ли backdrop-filter на доступность? Сам по себе - нет. Но убедитесь, что текст поверх стекла имеет достаточный контраст (WCAG AA: минимум 4.5:1 для обычного текста).

Можно ли анимировать blur? Да, через transition или @keyframes:

.glass-card {
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.3s ease;
}

.glass-card:hover {
  backdrop-filter: blur(12px);
}

Работает ли glassmorphism на мобильных? Да, iOS Safari поддерживает -webkit-backdrop-filter отлично. Android Chrome поддерживает стандартный backdrop-filter с версии 76. Производительность на слабых устройствах - следите за количеством blur-слоёв.

Как сделать glassmorphism в Tailwind CSS? В Tailwind v3+ есть утилиты: backdrop-blur-md, bg-white/10, border-white/30. Пример:

<div class="backdrop-blur-md bg-white/10 border border-white/30 rounded-2xl p-8">
  Glassmorphism через Tailwind
</div>

Полезные советы и лучшие практики

• Не переусердствуйте с blur. 8–16px - оптимальный диапазон. 40px выглядит как баг, а не дизайн.

• Всегда добавляйте -webkit-backdrop-filter. Safari держит значительную долю мобильного трафика.

• Тестируйте без blur. Через @supports убедитесь, что fallback выглядит достаточно хорошо.

• Ограничивайте количество blur-элементов. Один оверлей или три карточки - норм. Двадцать - нет.

• Комбинируйте с saturate и brightness для более реалистичного эффекта: backdrop-filter: blur(12px) saturate(160%).

• Избегайте blur на элементах с position: static поверх сложных анимаций - это источник артефактов рендеринга.

• Проверяйте контраст текста. Используйте инструменты вроде Colour Contrast Analyser.

Итог

backdrop-filter: blur() - мощный инструмент для создания glassmorphism-эффектов, но требует внимания к деталям. Ключевые моменты:

1. Всегда используйте -webkit-backdrop-filter вместе с backdrop-filter.

2. Фон элемента должен быть полупрозрачным через rgba.

3. За элементом должен быть видимый контент - иначе blur незаметен.

4. Добавляйте @supports-fallback для старых браузеров.

5. Следите за производительностью: не злоупотребляйте количеством blur-слоёв.

Glassmorphism при правильной реализации выглядит профессионально и современно. При неправильной - тормозит и ломается. Надеемся, эта статья помогла разобраться.