CSS. Как сделать плавный blur у фона?

Question

[Reflections]

Здравствуйте.

Задача - сделать плавный blur у фоновой картинки секции. Левая половина фона должна с blur, примерно к середине он плавно исчезает, правая половина фона без эффектов. Пример на скрине.



Грубо говоря, разметка такая:

<section class="section">
  <div class="container">
    <div class="section-blur">
    </div>
  </div>
</section>

.section {
  position: relative;
}

.section-blur {
  position: absolute;
  width: 50%;
  top: 0;
  left: 0;
  backdrop-filter: blur(10px);
  background: linear-gradient(89.5deg, rgba(0, 0, 0, 0.2) 2.06%, rgba(0, 0, 0, 0.044694) 39.98%, rgba(0, 0, 0, 0) 101.51%);
}

Все равно блюрит ровно 50% фона, не смотря на прозрачность элемента section-blur. Подскажите пожалуйста. Буду благодарен.

Answer 1

[Вадим]

Но я не рекомендую так делать.
Блюр на css не везде поддерживается и достаточно прожорливое свойство.
https://codepen.io/Mr_DECOY/pen/NWYwWxz
И в свойстве mask по средствам задания процентов градиента можно указывать степень плавности перехода от блюра к чёткой картинке.

Comments

[Reflections]

Спасибо. Буду иметь в виду.

А что можете посоветовать в качестве альтернативы? Например заказчику нужен блюр. Ну или вообще, дизайн в стиле глассморфизм, где блюр и полупрозрачные фоны является неотъемлемой частью?

[Вадим]

Reflections, Предупредить что
1) Возможно, не везде получится добиться желаемого результата, либо это будет дорого\долго\не везде высокопроизводително.
2) Охлаждать тра... пыл дизайнера, если таких элементов слишком много.
3) Выбирать оптимальный подход что как делать. Если нужно блюрить статику, то не нужно всё делать через CSS. Например, то, о чём Вы спрашиваете в данном вопросе, я бы всё же переложил на контент менеджера. То есть чтобы картинки такие полузаблюренные загружали, а не блюрить CSSом. Ну или как альтернатива сделать это через svg фильтры.

[Reflections]

Понял Вас. Спасибо за советы!