Как сделать размытие заднего фона для блока: Backdrop filter

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

Пример размытия заднего фона у карточек

Смотрите видео:

https://vk.com/video-219751701_456239231

VK Видео | YouTube

Как добавить Backdrop filter

  1. Создайте секцию с фоновым изображением.


Секция с фоновым изображением

  1. Добавьте карточки с прозрачным фоном и обводкой с помощью виджета Block List.


Карточки с прозрачным фоном и обводкой

  1. Выберите любую карточку — айтем в блок-листе. В правой панели найдите свойство Фоновые фильтры (Backdrop filters) и нажмите +, чтобы добавить фильтр.


Добавляем фоновый фильтр карточке

  1. Выберите эффект Размытие (Blur) и настройте нужное значение.


Делаем значение радиуса размытия побольше

5. Для эффектности можно дополнительно добавить цвет фона с прозрачностью.


Дополнительный полупрозрачный цвет фона у карточки

Готово! Мы сделали эффект размытия заднего фона у карточек.

Резюме

Эффект размытия заднего фона — свойство Фоновые фильтры (Backdrop filter) → Размытие (Blur).