Эффект матового стекла

Как сделать в Фигме

  1. Создаем шейп и добавляем к нему эффект Backdround blur.
  2. Устанавливаем необходимое значение прозрачности эффекта и цвета шейпа.

В моем случае, на скрине, прозрачность цвета 15%, блюр – 30.
Можно выбирать разный цвет шейпа, от этого будет меняться оттенок стекла.

Как сделать в Тильде

  1. Создаем шейп в Зеро блоке.
  2. Правой кнопкой мыши нажимаем на шейп и выбираем Add CSS class name.
  3. Задаем название стиля, например, blur.
  4. Добавляем в Zero Block html-элемент и сдвигаем его куда-нибудь за границу контейнера картинки, чтобы не мешал.
  5. Копируем код ниже и вставить его в html-элемент, используя кнопку Edit Code.
  6. Сохраняем и публикуем.
<style>
.blur {
backdrop-filter: blur(15px);
background: rgba(106, 151, 176, 0.15);
border-radius: 35px;
-webkit-backdrop-filter: blur(15px);
}
</style>
Значение border-radius: 35px; отвечает за скругление шейпа по краям. Если скругления не нужно, то этот параметр можно удалить.

backdrop-filter: blur(15px); и -webkit-backdrop-filter: blur(15px);– это значения интенсивности блюра. Обратите внимание, в Фигме я устанавливал это значение равным 30-ти. В Тильде, для того чтобы добиться того же эффекта, установлено значение 15.

background: rgba(106, 151, 176, 0.15); – это цвет и прозрачность.
Его можно удалить, если цвет не нужен. Либо установить значение цвета из Фигмы. Чтобы получить код цвета с прозрачностью из Фигмы, нужно выделить шейп с блюром и в правой панели нажать Inspect.
Made on
Tilda