Эффект жидкого стекла (Liquid Glass) как в iOS 26 на CSS и SVG

Что это за эффект

Кнопки и панели выглядят как кусочки толстого стекла. Всё, что проходит под ними, у краёв изгибается и сдвигается, как под линзой, а в середине остаётся чётким: там стекло плоское. По кромке бежит тонкий блик. Так выглядит интерфейс Liquid Glass в iOS 26 и macOS Tahoe.

Это не картинка и не обычное размытие. Скрипт строит для каждой панели карту смещений: для каждой точки кромки он считает, как луч света преломится на изогнутой поверхности стекла по закону Снеллиуса и насколько сместится, пока дойдёт до его дна. Эта карта уходит в SVG-фильтр feDisplacementMap, а фильтр — в backdrop-filter панели. Приём описан в разборе Криса Фейжоо Liquid Glass in the Browser.

Где использовать

• Плавающие панели и кнопки поверх фото, видео и карт: плеер, панель поиска, кнопки «вверх» и «вниз».
• Шапка и нижнее меню, под которыми прокручивается страница.
• Карточки поверх яркого фона на лендингах и в портфолио.

Стеклу нужно, что преломлять: на однотонном фоне эффекта не видно. Лучше всего оно смотрится над фотографиями и крупным контрастным текстом.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт и впишет их в вашу вёрстку. Ваши настройки сохранятся.

Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт для вставки на сайт. Скрипт без зависимостей.

Пометьте стеклянные элементы атрибутом data-glass и задайте им форму обычным CSS. Скругление обязательно: преломляет именно скруглённая кромка.

<div class="hero">
  <img src="photo.jpg" alt="">
  <button class="glass-button" data-glass>↓</button>
</div>

.glass-button { width: 56px; height: 56px; border-radius: 50%; }

createLiquidGlass(document.querySelector('.hero'), { thickness: 40, refraction: 1.5 });

Размер и скругление панели скрипт читает сам и пересчитывает карту, когда они меняются.

Настройки

• Толщина — насколько толстое стекло. Чем толще, тем дальше кромка сдвигает то, что под ней.
• Ширина кромки — выгнутая полоса у края. Дальше стекло плоское и ничего не искажает. Кромка не бывает шире радиуса скругления.
• Преломление — коэффициент преломления: 1 не преломляет ничего, 1,33 — вода, 1,5 — стекло.
• Размытие — лёгкая матовость того, что под стеклом.
• Насыщенность — насколько ярче становятся цвета под стеклом.
• Блик — яркость света на кромке.
• Белизна — белый оттенок стекла.
• Форма кромки — профиль края: мягкая (как у Apple), круглая, вогнутая или с бортиком.

Доступность и производительность

Стекло — только оформление: кнопки остаются обычными кнопками, а текст на них — обычным текстом. Ничего не анимируется, поэтому настройка «Уменьшить движение» эффект не затрагивает. Карта смещений считается один раз и заново — только когда панель меняет размер. Прокрутка под стеклом обходится без скрипта: браузер сам применяет фильтр.

Частые вопросы

В каких браузерах работает? Преломление — в браузерах на Chromium: Chrome, Edge, Opera, Яндекс Браузер. Safari и Firefox пока не умеют применять SVG-фильтр в backdrop-filter, и там скрипт сам ставит обычное матовое стекло с размытием. Сайт не ломается, просто выглядит проще.

Почему у квадратной панели нет эффекта? Преломляет только изогнутая кромка, а у панели без скругления её нет. Задайте border-radius не меньше ширины кромки.

Нужны ли библиотеки? Нет, всё делает одна функция без зависимостей.