Как реализовать этот эффект затухания матового стекла с помощью CSS? ⇐ CSS

[Anonymous]

Скриншот из журнала Apple. Я пробовал фоновый фильтр: размытие(4px);, но в конце наложения переход от размытия к прозрачности происходит резко.
размытие в журнале Apple
Мой CSS:

Код: Выделить всё

.floating-blur {
/* filter: blur(2px); */
backdrop-filter: blur(4px);
background: linear-gradient(
to top,
rgba(228, 214, 228, 0.6),
rgba(228, 214, 228, 0) 100%
);
}

мой проект

Подробнее здесь: https://stackoverflow.com/questions/797 ... -using-css