Как создать эффект Liquid Glass в UI: CSS, SwiftUI и React

Да, эффект «liquid glass» можно полностью реализовать при помощи кода. Ниже я собрал проверенные подходы для самых популярных платформ: веб‑страницы, SwiftUI и React, а также несколько советов, почему ваш первый эксперимент мог не сработать.

Содержание

• Что такое эффект Liquid Glass?
• Как реализовать эффект в веб‑интерфейсе
• Liquid Glass в SwiftUI
• Liquid Glass в React
• Частые ошибки и их исправления

Что такое эффект Liquid Glass?

Эффект «liquid glass» – это разновидность glassmorphism, где элемент выглядит слегка прозрачным, с размытой поверхностью, градиентом и отражениями, создавая ощущение растворения в окружении. Ключевые техники:

• Фоновый blur (backdrop-filter: blur(...) в CSS, blur(radius:) в SwiftUI);
• Градиентный цвет поверх фона (linear-gradient() в CSS, LinearGradient в SwiftUI);
• Тени и световые блики для «плавного» перехода краев.

См. официальную документацию Apple о Liquid Glass: Applying Liquid Glass to custom views.

Как реализовать эффект в веб‑интерфейсе

1. Базовый CSS‑пример

<div class="glass">
  <h2>Пример</h2>
  <p>Текст внутри элемента.</p>
</div>

<style>
.glass {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  color: #fff;
  max-width: 300px;
  margin: 50px auto;
}
</style>

Пояснения:

• backdrop-filter размытие применяется к всему, что находится за элементом.
• background задаёт слегка прозрачный белый оттенок, создавая «плёночный» вид.
• border-radius и border придают мягкость краёв.

2. Улучшения с градиентом и тенями

.glass {
  backdrop-filter: blur(25px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25),
                              rgba(255, 255, 255, 0.05));
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
  padding: 30px;
}

Для более тонкой настройки используйте mix-blend-mode и filter: saturate(...).

3. Библиотеки и готовые решения

• liquid-glass-js – небольшая JS‑библиотека, добавляющая динамический эффект в зависимости от движения мыши или скролла. Посмотреть пример: GitHub – dashersw/liquid-glass-js.

• liquid-glass-react – React‑компонент с хуками и кастомными настройками. Документация: GitHub – rdev/liquid-glass-react.

Если ваш интерфейс построен полностью скриптом, просто подключите одну из этих библиотек и оберните нужные элементы в <LiquidGlass>.

Liquid Glass в SwiftUI

Apple официально включила поддержку Liquid Glass в iOS 26/macOS 26. В SwiftUI это реализуется через модификатор glassEffect и готовые материалы Material.ultraThin, Material.thin, Material.regular и т.д.

import SwiftUI

struct GlassCard: View {
    var body: some View {
        VStack {
            Text("Котировка")
                .font(.title)
                .bold()
                .foregroundColor(.white)
            Text("Apple")
                .font(.title2)
                .foregroundColor(.white.opacity(0.7))
        }
        .frame(maxWidth: .infinity)
        .padding()
        .background(.ultraThinMaterial)   // или .thinMaterial
        .clipShape(RoundedRectangle(cornerRadius: 20))
        .shadow(color: .black.opacity(0.2), radius: 10, x: 0, y: 5)
    }
}

Подробнее о настройке и комбинировании материалов см. Apple Developer – Applying Liquid Glass to custom views.

Советы

• Проверяйте версии: эффект доступен только в iOS 26 и выше.
• **Используйте Material вместо ручного blur() – система автоматически оптимизирует GPU‑вычисления.
• Для динамических слоёв можно использовать ZStack с несколькими материалами, создавая «плавающие» слои.

Liquid Glass в React

React‑проект можно быстро обернуть в компонент Liquid Glass, используя liquid-glass-react:

npm i liquid-glass-react

import React from 'react';
import LiquidGlass from 'liquid-glass-react';

const Card = () => (
  <div style={{ width: 300, margin: '50px auto' }}>
    <LiquidGlass
      elasticity={0.4}
      style={{ backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 16 }}
    >
      <div style={{ padding: 20, color: '#fff' }}>
        <h3>Пример карточки</h3>
        <p>Текст внутри.</p>
      </div>
    </LiquidGlass>
  </div>
);

export default Card;

Библиотека автоматически применяет backdrop-filter и реагирует на движение мыши, создавая более «живой» вид.

Как ускорить рендеринг

• Включите will-change: transform для GPU‑хардверной анимации.
• Ограничьте backdrop-filter только к нужным элементам – это снижает нагрузку на рендеринг.
• Для мобильных устройств используйте prefers-reduced-transparency.

Частые ошибки и их исправления

Заключение

• Эффект liquid glass реализуется комбинацией blur, градиента и прозрачности; примеры кода доступны как для веб‑страниц, так и для мобильных приложений.
• Для веб‑сайтов лучше использовать чистый CSS с backdrop-filter и при желании подключить liquid-glass-js или liquid-glass-react.
• В SwiftUI примените готовые материалы Material.ultraThin и модификатор glassEffect.
• Убедитесь, что ваша платформа поддерживает выбранные CSS‑или Swift‑проперти, и применяйте описанные решения.
• Если хотите, пришлите ваш скрипт, и я помогу доработать его под конкретную платформу.

Источники

1. Applying Liquid Glass to custom views – Apple Developer
2. dashersw/liquid-glass-js – GitHub
3. rdev/liquid-glass-react – GitHub
4. CreateWithSwift – Exploring a new visual language: Liquid Glass
5. Donny Wals – Designing custom UI with Liquid Glass on iOS 26