Простота вместо сложности
Реализация эффекта Liquid Glass в CSS традиционно требует тонкой настройки множества свойств: backdrop-filter, теней, смещений. Проект Liquid Glass Studio (репозиторий hilsetapp) решает эту проблему, предлагая веб-приложение, состоящее всего из трех файлов: index.html, styles.css и app.js. Приложение не требует установки Node.js, npm или каких-либо зависимостей — достаточно открыть файл в браузере или запустить локальный сервер через npx serve.
7 параметров и 6 пресетов
Интерфейс предлагает интуитивное управление через слайдеры. Разработчики выделили ключевые параметры, влияющие на визуальное восприятие «стекла»: размытие, молочность, насыщенность, радиус, глубина, свет по краю и преломление. Для быстрого старта доступны шесть готовых пресетов, имитирующих различные стили интерфейса Apple.
| Пресет | Описание эффекта |
|---|---|
| iOS Dock | Классический вид панели док-станции с легким размытием |
| Frosted | Эффект матового стекла (классика) |
| Thick lens | Эффект толстой линзы с сильным искажением |
| Dark smoke | Темный дымчатый оттенок |
| Rose glass | Стеклянный эффект с розовым оттенком |
| Neon edge | Яркая светящаяся кромка |
Уникальная функция: SVG-преломление
Главное отличие инструмента — поддержка опционального edge refraction (преломления по краю). Это реализуется через встроенный SVG-фильтр смещения, который создает тот самый «wow-эффект» из iOS 26, когда свет изгибается вдоль границ панели. Примечательно, что при отсутствии поддержки в браузере (например, в Chrome без экспериментальных функций) панель корректно деградирует до обычного матового стекла, не ломая верстку.
Экспорт и совместимость
Результат работы можно скопировать одним кликом в виде чистого CSS или классов Tailwind. Сгенерированный код не содержит специфичных зависимостей и работает в любом проекте: от чистого HTML до React, Vue или WordPress. Лицензия проекта — MIT, что позволяет использовать сгенерированный код в коммерческих продуктах бесплатно. Для тестирования эффекта на реальном дизайне предусмотрена функция загрузки собственного фонового изображения (drag-and-drop или вставка из буфера).
Источник: Github ↗