ПаветтаГенератор glassmorphism
Матовое стекло — это карточка, сквозь которую размыто просвечивает фон. Собирается из четырёх вещей: полупрозрачной заливки, свойства backdrop-filter с размытием, светлой рамки по краю и мягкой тени.
Матовое стекло
Карточка размывает то, что находится под ней, и остаётся полупрозрачной. Текст поверх должен читаться на любом участке фона.
КнопкаCSS
Из чего собирается матовое стекло
Матовое стекло — это карточка, сквозь которую размыто просвечивает фон. Собирается из четырёх вещей: полупрозрачной заливки, свойства backdrop-filter с размытием, светлой рамки по краю и мягкой тени. Убрать любую из них — и эффект рассыпается: без рамки карточка теряет край, без тени не отрывается от фона.
Ключевую работу делает backdrop-filter: он применяет размытие к тому, что видно сквозь элемент. Обычный filter размыл бы саму карточку вместе с текстом на ней, здесь же текст остаётся резким, а фон под ним уходит в мягкое пятно. Значение размытия обычно берут от восьми до двадцати пикселей.
Эффект работает только на подвижном или сложном фоне: на однотонной заливке размывать нечего, и карточка выглядит просто полупрозрачной. Поэтому стекло почти всегда кладут поверх фотографии или градиента.
| Слой | Свойство | Разумное значение |
|---|---|---|
| Заливка | background | rgba(255,255,255,.15) |
| Размытие фона | backdrop-filter | blur(12px) |
| Край | border | 1px rgba(255,255,255,.25) |
| Отрыв от фона | box-shadow | 0 8px 32px rgba(0,0,0,.2) |
От Aero до Big Sur и названия стиля
Приём старше своего названия. Windows Vista в 2006 году показала оболочку Aero с полупрозрачными размытыми рамками окон — тогда это требовало отдельной видеокарты и считалось роскошью. Mac OS X пользовалась размытыми панелями ещё раньше, и обе системы позже от эффекта отказывались и снова к нему возвращались.
Название закрепилось в 2020 году: дизайнер Михал Малевич описал приём в серии заметок и назвал его глассморфизмом, а через несколько месяцев вышли macOS Big Sur и Windows 11 с матовыми панелями по всему интерфейсу. Совпадение сделало стиль массовым за один сезон.
В браузерах свойство backdrop-filter появилось в Safari в 2015 году, в Chrome с 2019-го, а последним подтянулся Firefox — до 2022 года эффект там приходилось изображать запасным вариантом с плотной заливкой. Отдельная сложность в том, что эффект дорого обходится на слабых устройствах, и часть систем отключает его автоматически при экономии заряда.
Как подобрать прозрачность и не уронить скорость
Соберите четыре слоя и подберите прозрачность заливки: на светлом фоне берут белую с прозрачностью около пятнадцати процентов, на тёмном — белую с десятью или чёрную с двадцатью. Слишком плотная заливка убивает эффект, слишком прозрачная делает текст нечитаемым.
Проверьте читаемость на самом сложном участке фона. Стекло поверх фотографии с контрастными пятнами почти всегда требует дополнительного затемнения, иначе текст пропадает на светлых местах. И держите в уме нагрузку: backdrop-filter пересчитывается на каждом кадре, поэтому десяток стеклянных карточек в прокручиваемой ленте заметно тормозит на телефоне.
Обязательно задайте запасной вариант с плотной заливкой для браузеров без поддержки — иначе там останется полупрозрачная карточка с нечитаемым текстом. Тень для карточки соберёт генератор box-shadow, а фильтры для самой картинки — генератор filter.
Заранее решите, что будет под стеклом. Красивый фон под карточкой в макете часто оказывается сплошной заливкой на реальной странице, и весь эффект сводится к полупрозрачному прямоугольнику. В таких случаях уместнее обычная карточка с тенью. Проверьте эффект и в тёмной теме: заливка, подобранная под светлый фон, на тёмном обычно требует другой прозрачности и другого цвета рамки.
| Слоёв в эффекте | четыре |
| Размытие фона | blur 8–20px |
| Прозрачность заливки | 10–20 % |
| Край | светлая рамка 1px |
| Windows Aero | 2006 |
| Название стиля | 2020 |
| backdrop-filter в Safari | 2015 |
| Нужен фон | фото или градиент |
Как пользоваться
Инструмент даёт настроить каждую и сразу показывает результат на фотографии — потому что на однотонном фоне эффект не виден вовсе. Отдельно считается читаемость: полупрозрачный слой почти всегда роняет контраст текста ниже нормы, и об этом лучше узнать до вёрстки. Готовый код выдаётся с префиксом для Safari и с запасным вариантом на случай, когда размытие фона браузером не поддерживается.
- Размытие, прозрачность, насыщенность, радиус и рамку — ползунками.
- Предпросмотр переключается между тремя фонами: фото, градиент, однотонный.
- Под предпросмотром — оценка контраста текста поверх стекла.
- С префиксом для Safari и запасным вариантом для старых браузеров.
Частые вопросы
Чем backdrop-filter отличается от filter
Filter размывает сам элемент вместе с его содержимым, включая текст. Backdrop-filter размывает то, что находится ЗА элементом, а содержимое остаётся резким. Для стекла нужен именно второй: карточка размывает фотографию под собой, но надпись на карточке читается чётко.
Почему эффект не виден
Три частые причины. У элемента непрозрачный фон — тогда размывать нечего, заливка должна быть полупрозрачной. За элементом однотонный фон — размытие ровного цвета даёт тот же ровный цвет. Либо у родителя стоит overflow: hidden вместе с transform, что в части браузеров обрывает слой подложки.
Где backdrop-filter поддерживается
Во всех актуальных браузерах: Chrome с 76-й версии, Safari с 9-й под префиксом и с 18-й без него, Firefox с 103-й. Проблемы остаются на старых сборках и в некоторых встроенных вебвью. Поэтому в выдаваемом коде стоит блок @supports: без поддержки карточка получает плотную непрозрачную заливку и выглядит нормально, просто без размытия.
Почему текст на стекле плохо читается
Потому что фон под ним не постоянный: на светлом участке фотографии белая надпись пропадает, на тёмном — чёрная. Правило простое: чем прозрачнее стекло, тем ниже гарантированный контраст. Практичные способы — поднять непрозрачность заливки выше 0,55, добавить под текст отдельную плашку или увеличить кегль. Проверка под предпросмотром показывает худший случай.
Сильно ли эффект грузит страницу
Заметно. Backdrop-filter заставляет браузер перерисовывать слой подложки при каждом изменении, и на слабых устройствах это видно при прокрутке. Одна-две стеклянные карточки на экран проходят спокойно, десяток на длинной странице уже роняет плавность. Стеклянную шапку, висящую поверх прокручиваемого контента, стоит проверять на телефоне отдельно.
Что даёт saturate вместе с blur
Насыщенность. Одно размытие делает подложку блёклой, потому что усредняет соседние пиксели. Добавление saturate возвращает цвету плотность, и стекло выглядит живее. Значение 1,3–1,8 работает хорошо, выше — цвет становится кислотным.
Спросите нейросети об инструменте
Похожие инструменты
Тень блока со слоями: смещение, размытие, растяжение, цвет и прозрачность. Внутренняя тень, готовые пресеты и разбор чужого значения.
ОткрытьГенератор CSS filterРазмытие, яркость, контраст, насыщенность, оттенок, сепия и тень по контуру. Предпросмотр на своей картинке, файл остаётся в браузере.
ОткрытьМинификация CSSСжатие стилей с подсчётом экономии в байтах и после gzip. Обратное разворачивание минифицированного кода в читаемый вид.
ОткрытьГенератор неоморфизмаМягкие тени от одного источника света: выпуклые и вдавленные элементы на CSS, с предупреждением о доступности.
ОткрытьГенератор тестовых данныхПачка вымышленных записей для тестов: ФИО, телефон, ИНН, СНИЛС, ОГРН, счёт и карта — с настоящими контрольными разрядами. Выгрузка в CSV, JSON и SQL.
ОткрытьСудокуГенератор 9 × 9 четырёх уровней и детских 4 × 4 и 6 × 6 с единственным решением, решение на экране с карандашом, проверкой и подсказками с объяснением, решатель своих судоку, печать четырёх на лист с ответами.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.