CSS | 实现无缝渐变模糊效果（类似 macOS / HyperOS）

我的想法

我想实现类似下面这两张图的无边界渐变模糊效果：

然而，今天在逛一个网站时偶然看到了这种完美的效果！

这不就是我一直想找的渐变模糊效果吗？

实现方式

实现代码：

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

这两个属性的作用如下：

1. backdrop-filter: blur(7.5px);

背景模糊（毛玻璃效果）

• 对元素后方的内容进行高斯模糊，模糊半径为 7.5px
• 就像透过一块磨砂玻璃看背后的内容
• 配合半透明背景色（如 background: rgba(255,255,255,0.3)）效果更佳，能产生经典的**毛玻璃（Glassmorphism）**质感
• 注意：backdrop-filter 是对元素背后的内容做模糊，而 filter 是对元素本身做模糊

2. mask-image: linear-gradient(transparent, black);

遮罩（从透明渐变到不透明）

• 通过 mask-image 定义元素的可见区域
• linear-gradient(transparent, black) 是一个从上到下的渐变：
  • 顶部 → transparent（完全透明，元素不可见）
  • 底部 → black（完全不透明，元素完全可见）
• 效果：元素从顶部逐渐淡出到底部完全显示，形成一个平滑的渐隐过渡

实现效果

也可以改变模糊半径，例如减小模糊半径为 2px，实现更细腻的效果：

或者修改背景色，实现好玩的效果：