Liquid Glass 2.0 в CSS: реализация эффекта Liquid Aqua на современных веб-стандартах
Дизайн веб-интерфейсов переживает очередную эволюцию эстетики стеклянных элементов (Glassmorphism). На смену первому поколению «плоского стекла» Liquid Glass 1.0, страдавшему от низкой контрастности и размытия текста на светлых фонах, приходит обновленная стилистика — Liquid Aqua (Liquid Glass 2.0). Ориентируясь на обновленный дизайн-язык продуктов Apple, веб-разработчики воссоздают эффекты объемного стекла с оптическим преломлением, использованием светотени и контрастных границ исключительно средствами чистого CSS.
Главное преимущество современного подхода — отсутствие необходимости привлекать тяжелые JavaScript-библиотеки или графические холсты Canvas/WebGL. Использование современных CSS-стандартов, таких как @property, backdrop-filter, подмешивание насыщенности saturate() и комбинация составных градиентов позволяет верстать адаптивные интерактивные кнопки и карточки с высокой производительностью рендеринга.
Эволюция стеклянного интерфейса: от 1.0 к Liquid Aqua (2.0)
Первые варианты стеклянных интерфейсов опирались на простое размытие подложки с полупрозрачной белой рамкой. Это создавало проблемы доступности: на неоднородных фоновых изображениях контрастность текста падала ниже допустимых норм WCAG.
Обновленный подход Liquid Aqua решает проблему читаемости за счет трех архитектурных сдвигов:
- Переход к вертикальному свечению: Вместо диагонального источника света преломление выстраивается строго по вертикали — с ярким бликом по верхнему краю и мягкой тенью снизу.
- Тёмные боковые разделители: Левая и правая границы элемента оформляются более темными контрастными тонами, отсекающими стеклянная тело от окружающего фона.
- Подмешивание цветной насыщенности: Вместо нейтрального белого размытия в
backdrop-filterдобавляется фильтрsaturate(), делающий цвета просвечивающего фона более сочными.
┌─────────────────────────────────────────────────────────────┐
│ Liquid Glass 1.0 │
│ [Диагональный свет] ──> Однородное размытие (blur) │
│ Проблема: размытый текст и слабая читаемость на фото. │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Liquid Aqua (2.0) │
│ - Вертикальное свечение (Glow top/bottom) │
│ - Тёмные боковые границы (Dark side borders) │
│ - Усиление насыщенности (backdrop-filter: blur + saturate) │
│ Результат: Четкий визуальный объем и высокий контраст. │
└─────────────────────────────────────────────────────────────┘
Пошаговый рецепт сборки элемента на CSS
Разработка стеклянной кнопки или карточки должна строиться по принципу прогрессивного улучшения (Progressive Enhancement): сначала создается доступный базовый компонент, и лишь затем поверх него накладываются визуальные фильтры.
Шаг 1. Декларация типизированных переменных через @property
Для управления анимацией и цветами в CSS используются типизированные пользовательские свойства (Typed Custom Properties). В отличие от стандартных CSS-переменных, переменные с синтаксисом @property позволяют браузеру предсказуемо плавно интерполировать цвета и числа во время переходов:
@property --glass-luminance {
syntax: "<number>";
inherits: true;
initial-value: 1;
}
@property --glass-bg-color {
syntax: "<color>";
inherits: true;
initial-value: rgba(255, 255, 255, 0.45);
}
Шаг 2. Базовые стили и фолбэк для старых браузеров
Не все браузерные движки одинаково производительно обрабатывают размытие фона. Для браузеров без поддержки фильтров задается полупрозрачная непрозрачная подложка:
.liquid-glass-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font-family: system-ui, -apple-system, sans-serif;
font-weight: 600;
color: #0f172a;
border-radius: 9999px; /* Каплевидная или овальная форма */
background-color: var(--glass-bg-color);
border: 1px solid rgba(255, 255, 255, 0.3);
text-decoration: none;
transition: transform 0.2s ease, filter 0.2s ease;
}
Шаг 3. Наложение эффектов преломления и градиентного свечения
При поддержке свойства backdrop-filter на элемент накладывается размытие и составной градиент, имитирующий преломление в каплях воды:
@supports (backdrop-filter: blur(10px)) {
.liquid-glass-button {
/* Размытие фона и подмешивание сочности цвета */
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
/* Составной градиент: верхний блик + темные боковые края */
background-image:
linear-gradient(
to bottom,
rgba(255, 255, 255, 0.65) 0%,
rgba(255, 255, 255, 0.15) 60%,
rgba(240, 240, 250, 0.3) 100%
),
linear-gradient(
to right,
rgba(15, 23, 42, 0.15) 0%,
transparent 15%,
transparent 85%,
rgba(15, 23, 42, 0.15) 100%
);
/* Составная контрастная рамка */
border-top-color: rgba(255, 255, 255, 0.8);
border-bottom-color: rgba(15, 23, 42, 0.2);
border-left-color: rgba(15, 23, 42, 0.15);
border-right-color: rgba(15, 23, 42, 0.15);
}
}
Шаг 4. Настройка активных и сенсорных состояний (
При нажатии мышью или касании пальцем на сенсорном экране стеклянный элемент должен реагировать прогибом и микросмещением свечения:
.liquid-glass-button:active {
transform: scale(0.97);
filter: brightness(0.95);
}
/* Сохранение четкого фокуса для навигации с клавиатуры */
.liquid-glass-button:focus-visible {
outline: 3px solid #0284c7;
outline-offset: 2px;
}
На мобильных устройствах на базе iOS для мгновенной отработки псевдокласса :active без задержек тапа веб-разработчики часто добавляют пустой обработчик события ontouchstart="" непосредственно на тег кнопки или контейнер формы.
Доступность (Accessibility) и производительность
Эстетика не должна приноситься в жертву удобству пользователей. При внедрении стилевого решения Liquid Aqua необходимо придерживаться следующих правил:
- Контроль контрастности текста: Цвет шрифта должен сохранять коэффициент контрастности не менее 4.5:1 относительно любого подлежащего фона. Если кнопка размещается поверх фотографии, под стеклянный контрол подкладывается темная или светлая плашка.
- Учет системных настроек движения: Добавьте медиа-выражение
prefers-reduced-motion, чтобы отключать динамические трансформация масштаба для пользователей, чувствительных к укачиванию:
@media (prefers-reduced-motion: reduce) {
.liquid-glass-button {
transition: none;
}
}
- Оптимизация производительности: Свойство
backdrop-filterсоздает отдельный слой композитинга на GPU. Не следует применять этот эффект к десяткам элементов одновременно (например, в длинных списках), чтобы не вызывать просадок FPS на бюджетных мобильных смартфонах.
Выводы
Стиль Liquid Aqua (Liquid Glass 2.0) решает главные болячки классического стеклянного дизайна, создавая читаемые, контрастные и эстетически привлекательные элементы UI. Грамотное комбинирование градиентов, backdrop-filter и типовых CSS-переменных позволяет веб-разработчикам создавать передовые интерфейсы на чистых стандартах веб-платформы.