Liquid Glass на сайте — стоит ли копировать стилистику iOS 26

Apple раскатала Liquid Glass в iOS 26 — стекло, которое преломляет фон под собой, а не просто размывает. С мая в Twitter и Behance валится поток попыток перенести эту эстетику на сайты. Половина выглядит как старый glassmorphism в новой упаковке, половина — реально интересно. Разбираем, что из этого жизнеспособно.

Чем отличается от обычного frosted glass

Старый glassmorphism делался на одном свойстве: backdrop-filter: blur(). Получалось матовое стекло, плоское и предсказуемое. Liquid Glass добавляет ещё два слоя поверх:

• Дисторсия фона — пиксели под элементом не размываются, а смещаются, как через линзу с переменной толщиной
• Краевая рефракция — по периметру элемента идёт светлая полоска искажения, имитирующая преломление света по выпуклой поверхности
• Реакция на движение — при скролле или анимации блика стекло «переливается», смещая искажения относительно фона

Как это собрать на CSS

Backdrop-filter сам по себе не умеет преломлять. Нужна комбинация:

1. backdrop-filter: blur(12px) saturate(160%) — база, размытие фона
2. SVG-фильтр с feDisplacementMap поверх — это даёт дисторсию. Карту смещения берём из feTurbulence с низкой частотой, чтобы получились плавные «волны» вместо шума
3. Тонкая граница с border: 1px solid rgba(255,255,255,0.18) и box-shadow inset — имитация рефракции на краях
4. Лёгкий конический градиент сверху как «блик»

Производительность — отдельная история. SVG-фильтры на больших площадях экрана убивают FPS на mid-tier Android. На MacBook M-серии летает, на Galaxy A52 уже видно лаги при скролле.

Где это работает, а где нет

Liquid Glass требует богатого фона. Над сплошным цветом или белым полотном эффект пропадает — преломлять нечего. Работает только когда под стеклом видео, градиент или картинка с деталями. Это сразу отсекает 80% корпоративных лендингов с белым фоном и чёрным текстом.

Уместно: hero с фотофоном, плеер поверх обложки, оверлей карты в навигации, модалка над дашбордом с графиками. Неуместно: формы, длинные тексты, всё что читается дольше пяти секунд. Текст поверх liquid glass быстро устаёт — глаз ловит микро-движения фона за буквами и теряет фокус.

Доступность

WCAG требует контраст 4.5:1 для основного текста. На стекле, под которым меняется фон, контраст плавает. Один и тот же абзац может пройти проверку в верхней части скролла и провалить её в нижней. Лечится только страховочным полупрозрачным слоем под текстом — что фактически убивает половину эффекта. Так что либо стекло без текста (декор, иконки, кнопки с тяжёлой обводкой), либо честный матовый бэк без претензий.

Наш опыт

Делали лендинг для премиального бренда мебели в апреле. Под hero шло видео интерьера, поверх — навигация и CTA на liquid glass. Эффект сработал, бизнес доволен. Но: пришлось отдельно собрать запасной вариант для Android-устройств с GPU слабее Adreno 660 — там вместо SVG-дисторсии включается обычный blur. Определяем через navigator.deviceMemory и navigator.hardwareConcurrency, не идеально, но работает.

Второй проект — SaaS-дашборд. Попробовали liquid glass на модалках. Снесли через неделю. Пользователи жаловались на «странное мерцание» при работе с формами. Эффект, который радует на маркетинговом лендинге, в продуктовом интерфейсе раздражает.

Стоит ли тащить

Если у вас имиджевый лендинг с медиа-фоном и недорого допилить performance fallback — да, прямо сейчас выделяет на фоне всех. Если корпоративный сайт, SaaS или магазин — пропускаем. Через год эстетика просочится в системные дизайн-системы (Material 4, Fluent 3 уже подбираются), тогда оно станет таким же бесплатным, как сейчас тени и скругления.