Что такое Glassmorphism веб-дизайн?

Glassmorphism берёт название и главный приём у настоящего матового стекла: полупрозрачной поверхности, которая размывает и смягчает то, что за ней, вместо того чтобы полностью её скрывать. В вебе это собирается на CSS-свойстве backdrop-filter - блюр плюс небольшая дополнительная насыщенность, - применённом к полупрозрачной панели с тонкой почти белой рамкой и мягкой тенью, изображающей край стекла. Эффект стал массовым языком UI после редизайна macOS Big Sur у Apple и материала Fluent/Acrylic в Windows у Microsoft - оба опирались на матовые, слоистые панели для системного chrome.

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

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

Ключевые визуальные характеристики

• Матовые полупрозрачные панели, собранные на backdrop-filter: blur() и saturate(), сквозь которые то, что находится позади, мягко просвечивает, а не резко видно
• Тонкая почти белая рамка в 1px и мягкая внешняя тень, изображающие физический край стеклянной пластины
• Крупные размытые цветные пятна или градиенты позади интерфейса - стеклянным панелям нужно что-то цветное под ними, чтобы вообще читаться как стекло
• Наложенные внахлёст, слегка смещённые друг относительно друга карточки, у каждой свой независимый блюр, создающие ощущение реальной физической глубины, а не одного плоского слоя
• Единообразно скруглённые углы на каждой стеклянной поверхности, отсылающие к мягкому, «пилюльному» chrome macOS и iOS
• Едва заметная текстура зерна поверх размытых областей, чтобы крупные блюр-зоны не давали бандинг и не выглядели плоским цифровым градиентом

Цветовые характеристики

• Яркие, насыщенные цвета фона вместо нейтрального серого - приглушённый фон недостаточно просвечивает сквозь блюр, чтобы читаться как стекло
• Сдержанная, преимущественно белая или почти белая палитра на самих панелях, цвет зарезервирован под фон, кнопки и мелкие акцентные детали
• Двухцветные градиенты, смешивающие основной и акцентный оттенок на кнопках, иконках-плитках и фоновых пятнах, отсылающие к слоистой полупрозрачности панелей над ними

Типографика

• Чистый, скруглённый или геометричный рубленый шрифт, близкий по духу к системным UI-шрифтам вроде SF Pro или Segoe UI
• Контрастный, преимущественно тёмный текст, положенный прямо на стеклянные панели - низкоконтрастный текст быстро теряется на размытом пёстром фоне
• Сдержанная типографическая иерархия в целом, поскольку основной визуальный интерес уже несут глубина и цвет самих стеклянных панелей

UI-паттерны

• Закреплённая матовая навигационная панель, остающаяся читаемой поверх прокручивающегося под ней контента
• Hero-секция из нескольких наложенных стеклянных панелей - статус-чип, основная карточка управления, небольшой виджет, - парящих над цветным размытым фоном
• Сетка матовых карточек фич или объектов, у каждой свой независимый блюр, расположенных на том же цветном фоне, а не на обычном фоне страницы
• Матовая подвальная панель в том же ключе, что и навигация, замыкающая тот же стеклянный язык сверху и снизу страницы