Liquid glass дизайн на CSS как в iPhone — стеклянное фиксированное меню для сайта

Как сделать liquid glass меню на CSS как в iPhone

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

В CSS такой подход часто называют glassmorphism, а более свежая визуальная интерпретация — liquid glass. Его можно использовать для главного меню сайта, кнопок, карточек, модальных окон и плавающих панелей.

Что такое liquid glass дизайн

Liquid glass — это визуальный эффект полупрозрачного слоя с размытием фона, мягкой светлой границей, внутренним бликом и плавной тенью. В отличие от обычного прозрачного блока, такой элемент выглядит глубже и лучше отделяется от страницы.

Основные CSS-свойства, которые используются для такого эффекта:

backdrop-filter: blur() — размывает фон за элементом;
background: rgba() — задаёт полупрозрачный фон;
border — добавляет тонкую стеклянную границу;
box-shadow — создаёт глубину;
border-radius — делает форму мягкой;
position: fixed — фиксирует меню поверх сайта.

Пример фиксированного меню с liquid glass эффектом

Ниже пример простого фиксированного меню, которое можно использовать на сайте. Оно закреплено сверху, имеет полупрозрачный фон, размытие и аккуратную тень.

<header class="site-header">
    <div class="header-inner">
        <a href="/" class="logo">Nikovit</a>

        <nav class="main-nav">
            <a href="/services/">Услуги</a>
            <a href="/blog/">Блог</a>
            <a href="/portfolio/">Портфолио</a>
            <a href="/contacts/">Контакты</a>
        </nav>

        <a href="#callback" class="header-btn">Обсудить проект</a>
    </div>
</header>

CSS для эффекта liquid glass

.site-header {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 20px;
}

.header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.logo {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    text-decoration: none;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.main-nav a {
    font-size: 15px;
    color: #1f2937;
    text-decoration: none;
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: #6708C7;
}

.header-btn {
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(103, 8, 199, 0.9);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(103, 8, 199, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.header-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(103, 8, 199, 0.35);
}

Важно добавить отступ для контента

Так как меню фиксированное и находится поверх страницы, основной контент может оказаться под ним. Чтобы этого не произошло, нужно добавить верхний отступ для страницы.

body {
    padding-top: 110px;
}

Размер отступа зависит от высоты меню и расстояния от верхнего края экрана.

Адаптация для мобильных устройств

На мобильных устройствах лучше упростить меню: скрыть навигацию, оставить логотип и кнопку, либо заменить пункты меню на бургер.

@media (max-width: 768px) {
    .site-header {
        top: 12px;
        padding: 0 12px;
    }

    .header-inner {
        padding: 12px 14px;
        border-radius: 20px;
    }

    .main-nav {
        display: none;
    }

    .header-btn {
        padding: 9px 13px;
        font-size: 13px;
    }

    body {
        padding-top: 90px;
    }
}

Как усилить эффект жидкого стекла

Чтобы меню выглядело более объёмным, можно добавить псевдоэлемент с мягким бликом.

.header-inner {
    position: relative;
    overflow: hidden;
}

.header-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.9),
        transparent
    );

    pointer-events: none;
}

Такой блик делает панель более похожей на стеклянный элемент интерфейса.

Готовый пример страницы

<body>

<header class="site-header">
    <div class="header-inner">
        <a href="/" class="logo">Nikovit</a>

        <nav class="main-nav">
            <a href="/services/">Услуги</a>
            <a href="/blog/">Блог</a>
            <a href="/portfolio/">Портфолио</a>
            <a href="/contacts/">Контакты</a>
        </nav>

        <a href="#callback" class="header-btn">Обсудить проект</a>
    </div>
</header>

<main>
    <section class="hero">
        <h1>Разработка сайтов на 1С-Битрикс</h1>
        <p>Создаю сайты, которые удобно развивать, продвигать и интегрировать с бизнес-процессами.</p>
    </section>
</main>

</body>

Поддержка backdrop-filter

Свойство backdrop-filter поддерживается современными браузерами, но для Safari желательно дополнительно указывать префикс:

backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);

Если браузер не поддерживает размытие фона, меню всё равно останется рабочим за счёт полупрозрачного фона и границы.

Fallback для старых браузеров

Для старых браузеров можно задать более плотный фон через @supports.

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .header-inner {
        background: rgba(255, 255, 255, 0.95);
    }
}

Когда такой дизайн уместен

Liquid glass хорошо подходит для современных сайтов услуг, личных сайтов, SaaS-проектов, портфолио и интерфейсов, где важно создать ощущение аккуратного технологичного продукта.

Но у этого подхода есть важное ограничение: если фон под меню слишком пёстрый, текст может стать хуже читаемым. Поэтому для меню лучше использовать достаточно плотный фон, например rgba(255, 255, 255, 0.65) или темный вариант для тёмных сайтов.

Тёмный вариант liquid glass меню

.header-inner.dark {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.header-inner.dark .logo,
.header-inner.dark .main-nav a {
    color: #ffffff;
}

Вывод

Сделать liquid glass меню на CSS можно без сложных библиотек. Основной эффект строится на сочетании полупрозрачного фона, размытия через backdrop-filter, мягкой границы, скруглений и тени.

Для сайта такой приём особенно полезен, если нужно сделать интерфейс более современным, лёгким и визуально дорогим. Главное — не забывать про читаемость, адаптацию для мобильных устройств и запасной фон для браузеров, где размытие может работать не полностью.

Как сделать liquid glass меню на CSS как в iPhone