CSS 滤镜生成器

滤镜函数

串联顺序很重要

filter: brightness(0.5) saturate(2) 先应用亮度，再应用饱和度，两个滤镜会叠加作用。

filter: saturate(2) brightness(0.5) 先应用饱和度。由于图像在被压暗之前更亮，色彩的饱和度会更明显。

视觉差异虽然细微，却真实存在。当滤镜链的效果不如预期时，不妨两种顺序都试一试。

常用配方

/* 褪色照片风格 */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* 复古 / 褪色 */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* 双色调近似 */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* 压暗主视觉图 */
filter: brightness(0.6);

/* 禁用状态 */
filter: grayscale(1) opacity(0.6);

/* 毛玻璃叠加层 */
filter: blur(12px) saturate(1.3);

用于毛玻璃效果的 backdrop-filter

filter 作用于元素自身；backdrop-filter 作用于半透明元素背后的内容，也就是 iOS 普及的毛玻璃效果。

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

支持情况：所有现代浏览器；Firefox 从 103 版起终于无需开启标志即可支持。

性能提示

• blur() 是开销最大的滤镜，因为它需要用卷积核对每个像素做运算。在 4K 主视觉图上做 30px 模糊会实实在在地掉帧。
• grayscale、sepia、brightness 等是逐像素的颜色变换，开销很低。
• 现代浏览器中滤镜会经 GPU 加速，但在低端设备上对 blur() 做动画仍会卡顿。
• 做动画前最好先设置 will-change: filter。

filter: drop-shadow() 与 box-shadow 的区别

• box-shadow 跟随元素的边框盒（尊重 border-radius）。
• filter: drop-shadow() 跟随元素的非透明像素，因此会沿着 clip-path 形状、PNG 透明区域和 SVG 路径描绘阴影。

为裁剪过或带透明区域的图像添加阴影时用 drop-shadow；标准卡片和方框则用更快的 box-shadow。