Эффект стекла в CSS

Липкая шапка стоит на месте, а фон под ней проезжает целиком. Над тёмным куском надпись держится, над светлым пропадает, и заметить это на неподвижном предпросмотре нельзя. Мы прогоняем шапку по всей высоте фона и показываем худшее положение, а не первое попавшееся.

Стекло вешают поверх собственного баннера, а примеряют его обычно на чужих снимках. Загрузите свою картинку: она разбирается в браузере и никуда не уходит. Рядом есть готовые фоны, включая пёстрый — с пятнами от почти белого до почти чёрного. Ровный градиент прощает любые настройки, такой фон не прощает ничего.

Если надпись не проходит порог, нажмите «Подобрать непрозрачность». Мы найдём наименьшее значение, при котором текст читается на всех трёх образцах сразу. Наименьшее важно: чем выше непрозрачность, тем меньше в стекле остаётся стекла. Когда порог недостижим даже при сплошной заливке, инструмент так и скажет, вместо того чтобы молча упереться в предел.

Браузер без поддержки backdrop-filter покажет полупрозрачную заливку поверх фона, и карточка провалится. В выдаче стоит блок @supports со сплошным цветом, подобранным под ваш же фон: это средний цвет стекла над ним. Отдельно идёт правило для системной настройки prefers-reduced-transparency.

Свойство поддерживают Chrome, Edge и Safari, а Firefox с версии 103, вышедшей в 2022 году. Префикс -webkit- нужен установленным сборкам Safari и не стоит ничего, поэтому в коде он стоит всегда. Отрисовка платная: браузер заводит отдельный слой и пересчитывает размытие при прокрутке, так что стекло на десятках карточек длинного списка заметно съедает частоту кадров.

Готовые правила выгружаются в CSS, в примесь SCSS, в набор классов Tailwind и в размётку HTML. Цвета стекла удобно подбирать палитрой из изображения по тому же баннеру, а проверить пару «текст и фон» отдельно поможет код цвета HTML.