如何在 CSS 中逐渐（羽化/渐变/过渡）模糊？

Question

我想慢慢地从 0% 模糊过渡到 100% 模糊。

理想情况下，我可以使用线性渐变语法backdrop-filter: linear-gradient(blur(8px), blur(8px), blur(0));，但这似乎不受支持。

有任何想法吗？

Answer 1

您可以mask在任何过滤器（filter和backdrop-filter）上使用。这将使您逐渐模糊内容。

例如。https://codepen.io/QuiteQuinn/pen/jOBxGjr

mask: linear-gradient(black, black, transparent);
backdrop-filter: blur(8px);

支持就在那里。截至 2021 年 6 月 5 日，Firefox 的“backdrop-filter”除外。

https://caniuse.com/css-backdrop-filter