Glassmorphism в CSS: как создать эффект матового стекла

Glassmorphism (стекломорфизм) — тренд в веб-дизайне, имитирующий полупрозрачное матовое стекло. Элементы выглядят как панели из замороженного стекла: размытый фон позади, лёгкая прозрачность, тонкие границы. Эффект создаёт глубину и современную эстетику, популярную в интерфейсах Apple, Windows 11 и многих SaaS-приложений.

Для быстрой настройки эффекта используйте Генератор Glassmorphism на reChecker.

Что такое glassmorphism

Ключевые визуальные признаки:

• Полупрозрачный фон — background с низкой непрозрачностью (rgba, hsla)
• Размытие фона — backdrop-filter: blur() создаёт эффект матового стекла
• Тонкая светлая граница — border с полупрозрачным белым для «края стекла»
• Мягкая тень — опционально, для отделения от фона

Без backdrop-filter полупрозрачный фон просто показывает размытый контент под собой — размытие даёт характерный «стеклянный» вид.

backdrop-filter: как это работает

backdrop-filter применяет фильтры (blur, brightness, contrast и др.) к области позади элемента, а не к самому элементу. Элемент должен быть полупрозрачным, чтобы размытие было видно.

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

Доступные функции backdrop-filter (аналогично filter):

• blur(radius) — размытие
• brightness(), contrast(), saturate(), grayscale(), sepia(), hue-rotate(), invert(), opacity()
• drop-shadow() — тень по контуру (не по прямоугольнику)

Для glassmorphism чаще всего используют blur(), иногда в комбинации с saturate() для усиления цвета.

Базовые примеры

Светлое стекло на светлом фоне

.glass-light {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

Тёмное стекло (для тёмной темы)

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

Цветное tint

.glass-tinted {
  background: rgba(99, 102, 241, 0.15);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

Стеклянная навигация

Сайдбар или верхняя панель с glassmorphism создают ощущение «парящего» интерфейса. Фон страницы (градиент, изображение) просвечивает сквозь панель, при этом контент остаётся читаемым. Важно не перегружать панель — один слой стекла обычно достаточно.

Модальные окна и карточки

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

Параметры для разных сценариев

Для навигации и панелей обычно достаточно blur(10–14px) и background с rgba(255,255,255,0.15–0.3). Для карточек и модалок можно увеличить blur до 16–20px и чуть поднять непрозрачность фона для лучшей читаемости. Тёмная тема требует rgba(0,0,0,0.2–0.3) и более мягкую границу. Экспериментируйте в Генераторе Glassmorphism на reChecker, чтобы подобрать нужный баланс.

Поддержка браузеров

backdrop-filter поддерживается в Chrome 76+, Safari 9+ (с префиксом -webkit-), Firefox 103+, Edge 79+. В старых Firefox (до 103) свойство не работало. Для Safari префикс -webkit-backdrop-filter обязателен.

Проверка поддержки:

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.2);
  }
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .glass {
    background: rgba(255, 255, 255, 0.9); /* непрозрачный fallback */
  }
}

Fallback-решения

Когда backdrop-filter недоступен:

1. Непрозрачный фон — background: rgba(255, 255, 255, 0.95) — контент читаем, эффект стекла теряется
2. Размытое изображение фона — дублировать фон как псевдоэлемент с filter: blur(), сложнее в реализации
3. SVG-фильтр — для продвинутых сценариев, редко оправдано

Для большинства проектов достаточно непрозрачного fallback — функциональность сохраняется, визуал упрощается.

Доступность (accessibility)

• Контраст — полупрозрачный фон снижает контраст текста. Убедитесь, что соотношение контраста соответствует WCAG (минимум 4.5:1 для обычного текста)
• Размытие и производительность — на слабых устройствах backdrop-filter может вызывать лаги; предлагайте отключать эффект через prefers-reduced-motion или настройки
• Фокус — интерактивные элементы внутри стекла должны иметь видимый focus ring

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

Принципы дизайна

1. Фон должен быть контрастным — glassmorphism работает лучше на фоне с градиентом, изображением или пёстрым контентом. На однотонном сером эффект почти незаметен.
2. Умеренное размытие — 8–16px обычно достаточно. Слишком сильное размытие выглядит неестественно.
3. Граница обязательна — тонкая светлая граница создаёт «край стекла» и улучшает читаемость.
4. Не перегружайте — много стеклянных слоёв друг над другом снижают читаемость. Используйте эффект выборочно — для карточек, сайдбаров, модальных окон.

Инструмент Glassmorphism на reChecker

Генератор Glassmorphism на reChecker позволяет:

• Настраивать прозрачность, размытие, цвет фона и границы
• Смотреть результат в реальном времени на разных фонах
• Копировать CSS одной кнопкой
• Получать fallback для браузеров без поддержки

Удобно для быстрого прототипирования и подбора параметров под ваш дизайн.

Сочетание с другими эффектами

Glassmorphism хорошо сочетается с border-radius для скруглённых панелей, с box-shadow для глубины и с clip-path для нестандартных форм. Не комбинируйте с неоморфизмом (neumorphism) — визуально они конфликтуют. Выберите один доминирующий стиль для интерфейса.

Производительность

backdrop-filter создаёт отдельный композитный слой. На большинстве устройств работает хорошо. Потенциальные проблемы:

• Много элементов с backdrop-filter на одной странице
• Анимация элементов с размытием
• Слабые мобильные устройства

Рекомендация: ограничивайте количество стеклянных элементов и тестируйте на целевых устройствах.

Альтернативы glassmorphism

Если backdrop-filter недоступен или нужен другой визуал, рассмотрите: полупрозрачный фон без размытия, градиентные overlay, неоморфизм (для минималистичных интерфейсов), классические карточки с тенью и непрозрачным фоном. Выбор зависит от стиля проекта и доступности. Помните, что glassmorphism — тренд, а не обязательный элемент: используйте его там, где он усиливает интерфейс, а не ради моды. На однотонном белом или сером фоне эффект почти незаметен — подготовьте контрастный фон (градиент, фото, пёстрый контент) для максимального визуального эффекта.

Рекомендации

1. Всегда добавляйте -webkit-backdrop-filter для Safari
2. Проверяйте контраст текста на стекле
3. Используйте fallback для старых браузеров
4. Не злоупотребляйте — glassmorphism должен усиливать интерфейс, а не перегружать его. Один-два стеклянных слоя на экране обычно достаточно для создания нужной атмосферы. Для быстрой проверки параметров и экспорта CSS используйте Генератор Glassmorphism на reChecker — он поддерживает светлую и тёмную тему и выдаёт готовый код с fallback.

FAQ

Что такое glassmorphism?

Glassmorphism — стиль дизайна, имитирующий полупрозрачное матовое стекло. Достигается комбинацией полупрозрачного фона, backdrop-filter: blur() и тонкой светлой границы. Популярен в современных UI (macOS, Windows 11, мобильные приложения).

Почему backdrop-filter не работает?

Проверьте: 1) добавлен ли префикс -webkit-backdrop-filter для Safari; 2) есть ли у элемента полупрозрачный фон (иначе размытие не видно); 3) поддерживает ли браузер свойство (Firefox до 103 — нет). Также backdrop-filter не работает на элементе с isolation: isolate в некоторых контекстах.

Как сделать fallback для браузеров без backdrop-filter?

Используйте @supports. При отсутствии поддержки задайте непрозрачный или полупрозрачный фон без размытия: background: rgba(255, 255, 255, 0.95). Контент остаётся читаемым, эффект стекла теряется.

Влияет ли glassmorphism на доступность?

Да. Полупрозрачный фон снижает контраст текста. Проверяйте соотношение контраста по WCAG. На слабых устройствах размытие может влиять на производительность — рассмотрите отключение при prefers-reduced-motion: reduce.

Какой инструмент использовать для создания glassmorphism?

Генератор Glassmorphism на reChecker — бесплатный онлайн-инструмент для настройки эффекта стекла. Позволяет менять прозрачность, размытие, цвет и границу с живым предпросмотром. Экспортирует готовый CSS с fallback. Подходит для дизайнеров и разработчиков.