Как сделать блюр (размытие) для хедера

Эффект блюра (размытия заднего фона) делает шапку сайта полупрозрачной — контент под ней размывается при прокрутке. В Taptop это реализуется через свойство Фоновые фильтры (Backdrop filter).

Шаг 1. Зафиксируйте хедер

Чтобы блюр работал при прокрутке, хедер должен быть зафиксирован поверх страницы:

Выберите секцию с хедером на холсте или на вкладке Слои.

В правой панели на вкладке Дизайн установите позиционирование Фиксированное (Fixed).

Задайте Z-index — например, 10, чтобы хедер всегда отображался поверх остального контента.

Шаг 2. Настройте прозрачный фон хедера

Фоновый фильтр размывает то, что находится позади элемента, поэтому фон хедера должен быть полупрозрачным:

В разделе Внешний вид → Цвет фона (Background color) выберите нужный цвет.

Уменьшите его непрозрачность (Opacity) — рекомендуемое значение: 70–85%.

Шаг 3. Добавьте фоновый фильтр

Выберите секцию хедера на холсте или во вкладке Слои.

В правой панели на вкладке Дизайн найдите раздел Внешний вид.

Нажмите «+» справа от параметра Фоновые фильтры (Backdrop filters).

Из выпадающего списка выберите эффект Размытие (Blur).

Настройте значение радиуса размытия — например, 10px.

Шаг 4. Проверьте результат

Нажмите «Предпросмотр».

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

Убедитесь, что текст и логотип в хедере хорошо читаются.

Советы

Если текст в хедере плохо читается — увеличьте непрозрачность фона или поменяйте цвет текста.

Темный полупрозрачный фон + блюр хорошо работает на светлых сайтах, светлый — на минималистичных.

Проверяйте отображение на мобильных устройствах.