Hilset

Почему глассморфизм в вебе выглядит как мыло: написал генератор «жидкого» стекла и выложил в Open Source

Каждый фронтендер или UI-дизайнер хоть раз пытался повторить эффект матового стекла в стиле iOS или macOS.

Почему глассморфизм в вебе выглядит как мыло: написал генератор «жидкого» стекла и выложил в Open Source

В макетах Figma все выглядит кинематографично: сочные размытые цвета, тонкая светящаяся кромка, ощущение тяжелого физического стекла. Но как только верстальщик пишет в коде классический backdrop-filter: blur(20px);, получается плоское серое мыло.

Причина простая: реальное стекло держится не только на размытии фона. Чтобы оно казалось объемным, нужны правильный оттенок с прозрачностью, подкрутка насыщенности подложки, внутренняя засветка по краям, глубинная тень и оптическое преломление по граням.

Подбирать эти параметры наугад через инспектор браузера, постоянно перезагружая страницу, утомляет. Поэтому я собрал Liquid Glass Studio: визуальный инструмент для настройки физического стекла в реальном времени с экспортом готового кода.

Без регистрации, без зависимостей и сборщиков, полностью в браузере.

Что отличает настоящее стекло от дешевой плашки

Пока я выводил математику эффекта, выделилось четыре ключевых слоя, из которых собирается реалистичная карточка:

  1. Размытие и сатурация (backdrop-filter)Один только blur делает задний фон блеклым и грязным. Чтобы цвета сквозь стекло оставались сочными, размытие обязательно связывается с насыщением: saturate(180%).
  2. Физическое тело стекла (Tint)Полупрозрачный белый или темный цвет с альфа-каналом от 0.05 до 0.2. Он задает плотность материала, но не должен перекрывать свет за ним.
  3. Фаска и грань света (Inset Shadows)Самый критичный момент, о котором почти все забывают. Стекло имеет толщину. Верхний край всегда ловит блик от источника света. В коде это делается через тонкую внутреннюю тень inset с белым полупрозрачным оттенком в 1 пиксель. Именно эта полоска делает элемент физическим, а не нарисованным.
  4. Преломление света на кромке (SVG Refraction)В Safari и Chrome есть экспериментальные возможности искажения через SVG displacement-фильтры. Если включить этот режим, свет по краям слегка искривляется, как в настоящей линзе.

Как устроен Liquid Glass Studio

Инструмент решает задачу за полминуты:

  • Проверка на реальных компонентах. На панели можно переключать превью между тремя типовыми элементами: карточка контента, кнопка действия и навигационный бар.
  • Дроп своего фона прямо в окно. Стекло не имеет смысла без контрастного фона. В студию можно перетащить скриншот своего реального проекта через Drag-and-Drop или просто нажать Ctrl+V. Картинка никуда не загружается на сервер и крутится только в памяти вашего браузера.
  • Шесть стартовых пресетов. От чистого дока iOS и глубокого дымчатого стекла до неоновой кромки и розовой линзы. Можно взять за основу и докрутить ползунками под свой проект.
  • Экспорт под любой стек. В один клик забирается чистый CSS со всеми свойствами, набор CSS-переменных для дизайн-системы, готовые утилитарные классы Tailwind CSS, SVG-фильтр преломления или CSS fallback для старых браузеров.
  • Ссылка с сохранением состояния. Любую настроенную комбинацию можно скопировать кнопкой Share: все параметры упаковываются в URL, так что ссылку можно скинуть коллеге-дизайнеру или разработчику.

Под капотом

Проект написан на чистом Vanilla JS, CSS и HTML.

Здесь нет тяжелых фреймворков, сборщиков Vite или Webpack, нет сотен npm-пакетов. Если скачать репозиторий, его можно запустить локально командой python3 -m http.server или просто дважды кликнуть по файлу index.html.

Тесты запускаются через встроенный нативный тест-раннер Node.js без единой внешней зависимости.

Инструмент полностью бесплатный и открытый (лицензия MIT).

Пользуйтесь в своих проектах, делитесь пресетами в комментариях и пишите, каких настроек вам не хватает при верстке интерфейсов.

11