В предыдущем посте я не затронул техническую часть — исправляю это.

Как Apple опять поменяла UI/UX

Последние годы мы привыкли к безопасному, предсказуемому минимализму в интерфейсах. Плоские панели, строгие сетки, аккуратные тени — дизайн стал почти невидимым фоном для функциональности. И именно в этот момент Apple решила встряхнуть индустрию, представив Liquid Glass — новый визуальный язык, который возвращает интерфейсам материальность, глубину и немного магии.

На первый взгляд это просто красивый эффект полупрозрачного стекла наподобие backdrop-filter: blur(...). Но если копнуть глубже, Liquid Glass — это попытка переосмыслить саму идею взаимодействия с цифровой средой. Между строк читается тезис: интерфейсы снова должны ощущаться, а не только работать. И нравится нам это или нет — тенденция уже начала формировать новые ожидания у пользователей.

В этой статье я разберу, как создать подобный интерфейс яблочной компании без использования различн��х npm-модулей или шейдеров, нагружающих видеопамять устройства.

Принципы Liquid Glass

Чтобы повторить стиль, нужно понимать его ключевые элементы:

• Полупрозрачный фон

• Размытие окружающего контента (backdrop-filter)

• Мягкие внутренние/внешние тени

• Лёгкие световые блики

• Аккуратные анимации

• Объём через слои и глубину

По сути, это — современный re-imagining стеклянного неоморфизма, но легче, воздушнее и «живее».

Пример блока с обычным размытием фона

Начнём с фундаментального — обыкновенной стеклянной панели.

HTML

<div class="backdrop">
  Неоморфизм
</div>

CSS

.backdrop {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Что здесь важно:

• background низкой плотности даёт полупрозрачность

• backdrop-filter размывает то, что под карточкой

• border создаёт ощущение стеклянного края

Реализация «жидкого стекла» в CSS без магии

Когда смотришь на Liquid Glass, кажется, что это просто blur с прозрачностью. Но характерная “текучесть” появляется только тогда, когда фон под панелью искажается неравномерно, с микродеформациями. Обычный blur даёт матовость, но не живость.

Чтобы получить такую “плату волн”, я использую SVG-фильтр с displacement map, встроенный прямо в backdrop-filter. Это даёт ровно тот эффект, который Apple достигает в своём стекле: фон как будто лежит под тонкой динамической плёнкой.

Как всё работает на уровне механики

Изучим компонент, создающий размытый фон наподобие Liquid Glass, который я создал для своего приложения.

export default function LiquidGlass() {
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    return (
        <>
            <svg className="hidden">
                <filter id="displacementFilter">
                    <feImage
                      href="data:image/png;base64,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"
                        preserveAspectRatio="none"/>

                    <feDisplacementMap
                        in="SourceGraphic"
                        in2="turbulence"
                        scale="600"
                        xChannelSelector="R"
                        yChannelSelector="G"
                    />
                </filter>
            </svg>
            <style>{`
.bg-liquid-glass {
    backdrop-filter: ${!isSafari ? "url(#displacementFilter) " : ""}blur(2px);
    @apply bg-muted/25;
}         
          `}</style>
        </>
    );
}

Теперь рассмотрим каждый блок компонента, особенно SVG-фильтра:

1. Карта искажений — обычный PNG-шум, закодированный в base64. Это не turbulence и не procedural noise из SVG — они дают слишком «облачный» рисунок. PNG с мелким равномерным шумом ведёт себя куда более натурально, особенно под малым blur.

2. feDisplacementMap использует эту карту как векторное поле:

   1. красный канал отвечает за смещения по X

   2. зелёный — по Y
      Значение scale определяет амплитуду волн. Большие числа не делают эффект агрессивнее — они делают его заметным после blur.

3. Проверка браузера сделана из-за того, что в Safari как всегда ничего не работает, и приходится прописывать fallback.

4. Добавлено немного цвета, чтобы сильно не сливалось с задним фоном.

Как использовать на любом блоке

Просто добавьте к любому тегу, будь то <div>,<button>, класс .bg-liquid-glass:

<div className="bg-liquid-glass ...">
...
</div>

Эффект знаменитого прозрачного стекла готов! Обязательно не забудьте добавить стили к каждому контейнеру, чтобы текст внутри не сливался с задним фоном.

Что важно учитывать при использовании Liquid Glass

• Поддержка в браузерах. К сожалению, на данный момент Safari не поддерживают displacement карты.

• Не перегружайте интерфейс. На слабых девайсах комплексные фильтры быстро дают по FPS, поэтому используйте эффект аккуратно и избегайте «тотального» блюра на больших областях.

• Смотрите на реальный масштаб. Один и тот же слой размывается по-разному на мобильных и десктопных разрешениях. Обязательно проверяйте качество и читаемость на нескольких форм-факторах.

• Контраст прежде всего. Стеклянные панели легко «съедают» текст — добавляйте тени, уплотняйте подложку, регулируйте цвет полупрозрачности.

• Эффект — не только украшение. Когда Liquid Glass используется аккуратно, он улучшает визуальную иерархию, фокусирует внимание и повышает комфорт взаимодействия, а значит влияет и на продуктовые метрики.

Почему этот эффект стоит внедрять сейчас

После появления Liquid Glass в интерфейсах iOS 26 тема полупрозрачных, «живых» поверхностей снова стала заметным трендом. Apple фактически нормализовала этот стиль, и пользователи их устройств уже воспринимают его как современный и «естественный».

Если продукту нужен актуальный визуальный язык, мягкая глубина и ощущение премиальности — сейчас идеальный момент, чтобы добавить Liquid Glass в дизайн-систему или хотя бы протестировать его в отдельных компонентах.