过渡）模糊？ [复制]

【问题标题】：How do I gradually(feather/gradient/transition) blur in CSS? [duplicate]如何在 CSS 中逐渐（羽毛/渐变/过渡）模糊？ [复制]
【发布时间】：2021-06-05 20:19:28
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

标签： css gradient blur

【解决方案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

【讨论】：