如何在 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 的“背景过滤器”除外。

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