Что это за эффект
Верхний и нижний края окна постепенно размываются. Содержимое страницы, которое уходит под край при прокрутке, не обрезается резко, а теряет чёткость: у самой кромки оно размыто сильнее всего, а ближе к середине экрана снова резкое. Такой край выглядит мягче обычной полупрозрачной полосы и не перекрашивает страницу.
Каждый край — это восемь наложенных друг на друга слоёв с backdrop-filter: blur(). Размытие удваивается от слоя к слою: от 0,08 до 10 пикселей. Маска каждого слоя открывает только свою полосу, а соседние полосы перекрываются, поэтому размытие нарастает плавно. Один слой с градиентной маской так не умеет: он только меняет прозрачность одного и того же размытия.
Где использовать
- Лендинги и портфолио с крупными фото и видео: края экрана выглядят как у дорогого интерфейса.
- Длинные статьи и документация: текст мягко уходит под закреплённую шапку и нижнюю панель.
- Ленты и каталоги с прокруткой внутри блока: тот же приём работает и на краях отдельного окна.
Как добавить на сайт
Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили и разметку в ваш проект. Ваши настройки сохранятся.
Вручную. «Скопировать код» копирует только стили и разметку краёв. «Скачать код» даёт готовую HTML-страницу с примером, на которой эффект видно сразу. JavaScript не нужен.
Разметку краёв вставьте один раз, в конце общего шаблона страницы, вне прокручиваемого содержимого:
<div class="progressive-blur top-blur" aria-hidden="true">
<div class="layer blur-1"></div>
<!-- … blur-2 — blur-7 … -->
<div class="layer blur-8"></div>
</div>
<div class="progressive-blur bottom-blur" aria-hidden="true">
<!-- те же восемь слоёв -->
</div>
Края закреплены через position: fixed, поэтому их нельзя класть внутрь элементов с transform: тогда они привяжутся к этому элементу, а не к окну. Если нужен только один край, оставьте его контейнер целиком, а второй уберите. Слои внутри не убирайте, иначе переход станет ступенчатым.
Блюр лежит поверх страницы, но не мешает кликам: у него pointer-events: none. То, что должно оставаться чётким, например шапку и кнопки, поставьте выше по z-index. По умолчанию у блюра z-index: 10.
Настройки
- Края — оба, только верх или только низ.
- Глубина края — высота размытой полосы на широких экранах. По умолчанию 200 px.
- Глубина на телефоне — то же на экранах до 680 px. По умолчанию 160 px.
- Вынос за край — насколько полоса заходит за край экрана, чтобы самое сильное размытие легло на его кромку. По умолчанию 32 px.
Значения размытия и маски слоёв в настройки не вынесены намеренно: именно они задают плавное нарастание.
Доступность и производительность
Края — чистое оформление: они скрыты от скринридеров и пропускают клики насквозь. Ничего не анимируется, поэтому настройка «Уменьшить движение» эффект не затрагивает. Скриптов и слушателей прокрутки нет: браузер сам пересчитывает размытие при прокрутке. На очень слабых устройствах backdrop-filter бывает тяжёлым; если страница начинает подтормаживать, уменьшите глубину края.
Частые вопросы
В каких браузерах работает? Во всех современных: Chrome, Edge, Safari, Firefox. Нужны backdrop-filter и mask-image. В CSS есть и префиксные варианты -webkit- для Safari, их не стоит убирать.
Красит ли эффект страницу в чёрный? Нет. Цвет #000 в градиентах — это только прозрачность маски. Сам блюр бесцветный и одинаково работает на светлом и тёмном фоне.
Можно ли сделать блюр внутри блока, а не по краям окна? Да. Положите края внутрь блока с position: relative и overflow: hidden и замените им position: fixed на position: absolute. Так сделан пример на этой странице.
