Глассморфизм

Глассморфизм (от буржуйского glassmorphism, он же стекломорфизм, мыльное кинцо, эффект матового очка) — попытка мамкиных UI-дизайнеров и маркетологов впарить хомячкам старую идею под новым соусом. Представляет собой визуальный стиль интерфейсов, в котором элементы выглядят как полупрозрачные куски пластика или матового стекла, парящие над разноцветным фоном. В 2020-х годах этот тренд захватил умы, мониторы и мощности видеокарт, заставив кулеры ноутов выть от натуги ради того, чтобы юзер мог видеть размытое цветное пятно под своей кнопкой Купить.

Суть стиля сводится к 4 основным столпам:

1. Эффект матового стекла (размытие фона, оно же background-blur).
2. Полупрозрачность заливки самих элементов (чтобы было видно, что там сзади).
3. Тонкая светлая граница (типа блик на кромке стекла, чтобы элемент хоть как-то выделялся).
4. Плавающие в 3D-пространстве слои, отбрасывающие легкую тень.

Суть

Если ты откроешь Figma или зайдешь на Dribbble, твои глаза немедленно вытекут от обилия мыльных карточек, наложенных на градиентные шары кислотных цветов. Дизайнеры, уставшие от плоского как доска Flat Design, решили, что пора добавить интерфейсам ГЛУБИНЫ. Но поскольку настоящий скевоморфизм рисовать долго и сложно (там же надо текстуру кожи, дерева и блики от солнца вырисовывать), ленивое поколение Z нашло выход. Зачем рисовать сложный блик, если можно просто ебануть заливке прозрачность на 10 процентов и накинуть фильтр блюра на 30 пикселей? ПРОФИТ! Вы восхитительны, берите свои 3000 баксов за проект.

Но проблема в том, что когда этот визуальный высер переносится из концептов в реальные рабочие проекты, начинается сущий пиздец. Текст на полупрозрачном фоне перестает читаться. Эпилептики ловят припадки от того, что пестрый фон елозит под стеклянными панелями. А фронтендеры седеют, пытаясь заставить этот ваш backdrop-filter работать во всех браузерах без просадки FPS до 2 кадров в секунду.

Дедушка Aero

Ньюфаги свято верят, что глассморфизм придумал Микал Малевич в 2020 году, или что это инновация от Apple. Олдфаги же при упоминании стеклянных окон только криво усмехаются и смахивают скупую мужскую слезу, вспоминая Windows Vista.

Да, мой юный друг. В далеком 2006 году (и даже раньше, в слитых билдах Longhorn), корпорация зла Microsoft выкатила интерфейс Windows Aero. Расшифровывалось это дерьмо как Authentic, Energetic, Reflective, and Open. По факту это был тот же самый глассморфизм, только на максималках: тяжелые, глянцевые, прозрачные рамки окон, сквозь которые просвечивал рабочий стол.

Я работаю с Windows Vista. Эффект стекла — это революция.

— Билл Гейтс в 2007 году, пытаясь продать лагающую ОС.

Тогда Aero Glass сжирал гигабайты оперативки и требовал видеокарту с поддержкой DirectX 9. Если твой комп был собран из говна и палок, система заботливо отключала стекло и показывала уебищную непрозрачную рамку цвета детской неожиданности. Но те, у кого железо тянуло, наслаждались перекатами окон в Flip 3D по нажатию на кнопку Win + Tab.

Но шли годы. В 2012 году наступила эпоха минимализма. Microsoft выпустила Windows 8 с ее плиточным интерфейсом Metro, выкинув стекло на помойку. Все стало плоским, квадратным и скучным. Казалось, стекло умерло навсегда.

Темные века Flat

Пока Microsoft игралась с плитками, Apple в 2013 году тоже решила убить скевоморфизм и выкатила iOS 7. Все текстуры льна и зеленого сукна из казино были уничтожены, но Джони Айв (вернее, пришедший ему на смену любитель минимализма) решил оставить 1 фишку: матовое стекло.

Когда ты тянул шторку Центра управления в iOS 7, фон размывался, и это выглядело как магия. Это был 1-й робкий шаг к возвращению мыла. В отличие от тяжелого Aero, стекло от Apple было тонким, изящным и… плоским. Просто размытие и легкая тонировка.

Долгие 7 лет этот эффект жил тихо, не привлекая лишнего внимания, пока не случился 2020 год.

Эпоха Dribbble

В 2020 году мир сидел по домам из-за COVID-19. Дизайнерам было нечего делать, и они начали клепать концепты. Плоский дизайн всем осточертел. Неоморфизм (выдавливание элементов из фона, как будто они сделаны из мягкого пластилина) оказался нежизнеспособным говном, потому что кнопки сливались с фоном, и юзеры с плохим зрением не могли понять, куда жмакать.

И тут на сцену ворвался он. Глассморфизм. Дизайнеры поняли формулу успеха:

• Берем фон. Обязательно добавляем туда 2 или 3 абстрактных пятна цвета фуксии, циана и блевотно-желтого.
• Рисуем векторный прямоугольник поверх.
• Ставим заливку белым цветом на 10 процентов.
• Накидываем размытие фона на 20 пикселей.
• Делаем обводку белым полупрозрачным цветом толщиной в 1 пиксель.
• Собираем тысячи лайков на Dribbble.

Появился даже специальный хештег #glassmorphism. Сотни UI-шлюх начали выкладывать концепты банковских приложений, дашбордов криптобирж и приложений для заказа пиццы, где ВСЁ было из стекла. Интерфейс выглядел так, будто ты смотришь на него сквозь запотевшее стекло душевой кабины, за которым кто-то светит RGB-лентой.

Как это кодить

Пока десигнеры дрочили на свои макеты, фронтендеры рвали волосы на жопе. Дело в том, что в вебе сделать прозрачный фон — как 2 пальца обоссать, достаточно прописать background: rgba(255, 255, 255, 0.2). Но чтобы размыть то, что находится ПОД элементом, нужно использовать свойство backdrop-filter.

В 2020 году поддержка backdrop-filter была такой себе. В Safari оно требовало префикса -webkit-, в Firefox работало через раз, а в IE11 (если кто-то еще поддерживал этот труп) вообще не существовало.

Я ебал этот ваш глассморфизм! У меня на старом Android из-за этого блюра страница скроллится с частотой 5 кадров!

— Обычный Вася-кодер с StackOverflow

Да, отрисовка размытия в реальном времени — это ресурсоемкая операция. Когда ты скроллишь страницу, браузеру нужно каждый кадр пересчитывать размытие для каждого пикселя фона, который попадает под стеклянный элемент. На мощных макбуках это работает плавно, но если твой пользователь сидит с китайского Xiaomi за 10000 рублей, его телефон может вскипятить воду от натуги.

Возвращение короля

Корпорации не могли остаться в стороне. В 2020 году Apple выкатила macOS Big Sur, где интерфейс стал настолько прозрачным, что иногда текст в меню было тупо не прочитать из-за того, что под ним была пестрая обоина.

В 2021 году Microsoft ответила Windows 11, выкатив свой обновленный Fluent Design с материалом Mica и Acrylic. Акрил был тем самым глассморфизмом: полупрозрачная текстура, которая размывала фон. Microsoft даже гордо заявила, что это помогает пользователям чувствовать иерархию окон. На самом деле это просто заставляло ПК тормозить, если у тебя не было нормальной видеокарты.

Апофеоз ФГМ

Но настоящий пиздец случился в 2025 году. В преддверии новых смарт-очков и прочего AR/VR говна, Apple выкатила iOS 26 с новым дизайн-кодом под названием Liquid Glass (Жидкое стекло).

Это уже был не просто блюр. Это была полная имитация преломления света, хроматических аберраций и толщины стекла. Элементы интерфейса стали выглядеть как пузатые стеклянные капли. Хомячки взвыли от восторга: Ах, как это футуристично!. Адекватные люди схватились за голову:

1. Контраст ушел в отрицательные значения. Белый текст на прозрачно-мыльном фоне поверх разноцветной картинки — это смерть для глаз.
2. Иконки приложений перекосоебило, потому что эффект преломления (рефракции) искажал их форму, когда ты наклонял телефон.
3. Юзабилити упало на уровень плинтуса. Пожилые люди, вроде чьей-то мамы, больше не могли отличить радиокнопку от текстового поля, потому что всё сливалось в 1 мерцающую мыльную лужу.

На Reddit в сабреддите r/UXDesign начался сущий кошмар. Пользователи создавали треды: Как отключить это дерьмо?. Apple же, с присущим ей ЧСВ, заявила, что пользователи просто неправильно смотрят на экран, но тихонько добавила в настройки Универсального доступа галочку Уменьшить прозрачность, которая превращала красивое жидкое стекло в унылые серые квадраты.

Смерть для слепых

Есть в веб-разработке такая штука как a11y (доступность). По правилам стандарта WCAG, контраст между текстом и фоном должен быть не менее 4.5 к 1.

Когда ты лепишь глассморфизм, ты никогда не знаешь, что окажется под стеклом. Если юзер поставит на рабочий стол белую картинку, а твое стекло имеет белый полупрозрачный фон с белым текстом… Угадай, что произойдет? Текст исчезнет нахуй.

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

Мамкины дизайнеры с Dribbble решают эту проблему просто: они тщательно подбирают фон так, чтобы под текстом всегда была темная часть градиента. В реальности же, когда контент динамический, интерфейс превращается в нечитаемую блевотину.

Психология мыла

Почему же людям так нравится этот эффект? Психологи (британские ученые) утверждают, что матовое стекло ассоциируется у нас с премиальностью, чистотой и холодом.

• Вспомни бутылку дорогой водки или парфюма — матовое стекло.
• Вспомни душевую кабину в дорогом отеле.
• Вспомни матовые фасады модных кухонь.

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

Глассморфизм в AR и VR

Единственное место, где эта параша имеет смысл — это шлемы виртуальной и дополненной реальности. В Apple Vision Pro или Meta Quest 3 операционки (например, visionOS) вовсю используют стекло. И там это оправдано! Когда ты сидишь в своей захламленной хрущевке с надетым на голову ведром за 3500 баксов, интерфейс должен парить в пространстве. Если сделать окна абсолютно непрозрачными (как лист картона), они будут перекрывать тебе обзор реального мира. Ты пойдешь на кухню и уебешься мизинцем о тумбочку, потому что окно браузера закрыло тебе половину комнаты.

Стекло же позволяет видеть, что за окном есть препятствия, но при этом блюр делает текст на самом окне читаемым. Это единственный юзкейс, где глассморфизм — это не дизайнерская мастурбация, а жизненная необходимость. Но на кой хрен тащить это в плоские экраны мобильников — загадка от Жака Фреско.

Процесс приготовления

Если ты, мой юный друг, все же решил стать модным и стильным, вот тебе алгоритм создания стеклянного говна по ГОСТу:

1. Открой Figma.
2. Сделай фрейм 1920 на 1080.
3. Засунь на задний план фотку с цветными разводами. Погугли Mesh gradient или Abstract aura.
4. Нарисуй прямоугольник. Закругли углы на 24 пикселя (обязательно 24, если сделаешь 23 — ты лох и не шаришь).
5. Убери стандартную заливку. Добавь белую с непрозрачностью от 10 до 40 процентов. Больше 40 — получится тупо белая плашка. Меньше 10 — никто не заметит.
6. В меню эффектов добавь Background blur. Ставь значение от 20 до 40.
7. А теперь главное! Обводка! Без обводки магия не сработает. Добавь внутреннюю обводку (Inside) толщиной в 1 пиксель. Но не просто сплошную, а линейный градиент. Сверху слева белый на 50 процентов, снизу справа — белый на 0 процентов (или черный на 10 процентов). Это создаст иллюзию толщины стекла, на которое падает свет с 1 стороны.
8. Накинь тень (Drop shadow), но мягкую. Смещение по Y на 10, блюр на 30, цвет черный с прозрачностью 10 процентов. Тень должна быть легкой, как дыхание девственницы.
9. Накинь еще 1 слой с шумом (noise texture) с прозрачностью 2 процента, чтобы имитировать фактуру матового пластика.

Поздравляю, ты сделал 1 карточку! Теперь напиши на ней шрифт Inter или SF Pro, выложи на Dribbble и подпиши My new SaaS Crypto Dashboard UI Glassmorphism.

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

В попытках переплюнуть глассморфизм, десигнеры наплодили еще кучу нелепых -морфизмов:

Клейморфизм

Это когда элементы выглядят не как стекло, а как надувные игрушки или куски пластилина Play-Doh. Глубокие двойные тени (одна темная снаружи, другая светлая внутри для объема). Выглядит инфантильно, используется в основном в NFT-проектах и сайтах для крипто-говноедов, чтобы создать ощущение фана и игры, пока тебя разводят на бабки.

Неоморфизм

О нем уже упоминали. Плоть от плоти выдавливания из фона. Требовал, чтобы цвет самого элемента в точности совпадал с цветом фона. Эффект достигался 2 тенями — светлой слева сверху и темной справа снизу. Продержался в трендах ровно 1 год, пока разработчики не поняли, что это невозможно нормально реализовать с точки зрения доступности.

Брутализм

Ответный удар от тех, кого заебало мыло и пластилин. Резкие черные контуры, кислотные цвета, отсутствие сглаживания, шрифты из 90-х. Выглядит так, будто сайт верстали на HTML 3.2 в Блокноте в 1998 году. Максимально ублюдочно, но зато контрастно и работает быстро. Полная противоположность глассморфизму.

Примеры из дикой природы

Помимо системных интерфейсов (Windows, macOS, iOS), глассморфизм проник в:

• Telegram — Павел Дуров (или его рабы-дизайнеры) периодически добавляет полупрозрачные хидеры и всплывающие окна, сквозь которые видно обои чата.
• Discord — в разных темах и панелях тоже есть размытие, особенно если включить аппаратное ускорение.
• Сайты-визитки всяких крипто-стартапов и ИИ-нейросетей. Там глассморфизм — это просто закон жанра. Если ты запускаешь AI-стартап в 2026 году и у тебя на сайте нет полупрозрачной карточки поверх вращающегося градиентного шара — тебе просто не дадут инвестиций.
• Игры — привет из Valorant, где интерфейсы меню стилизованы под какие-то высокотехнологичные стеклянные панели. Там это работает, потому что киберспорт и футуризм.

По теме

• Скевоморфизм — Великий предок, которого мы потеряли.
• Flat Design — Плоская альтернатива для прагматиков.

Ссылки

• dribbble.com — Обитель зла, где плодятся стеклянные выкидыши.