CSS滤镜生成器
免费在线 CSS 滤镜生成工具，免安装。可视化编辑，实时预览效果
什么是 CSS 滤镜？
CSS 滤镜是应用于元素的视觉效果，在渲染之前改变其外观。filter 属性接受 blur()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia() 和 drop-shadow() 等函数。滤镜可以应用于任何元素，包括图像、文本和容器。可以通过空格分隔来组合多个滤镜。
如何使用 CSS 滤镜生成器
调整各个滤镜滑块以实时查看对预览文本的效果。预览显示滤镜如何影响外观。使用预设作为快速起点：无（无滤镜）、灰度（黑白）、复古（带对比度的褐色）、模糊（高斯模糊）、反色（颜色反转）或暖色（带暖意的饱和）。点击「复制 CSS」获取可直接粘贴到样式表中的滤镜属性值。
滤镜性能和浏览器支持
CSS 滤镜在现代浏览器中通过 GPU 加速，性能流畅。然而，过多的滤镜（尤其是在大区域上的模糊）可能会影响性能。所有现代浏览器都支持 CSS 滤镜。对于较旧的浏览器，请考虑回退方案或渐进增强策略。
▶我可以同时使用多个滤镜吗？
可以。您可以通过空格分隔来组合多个滤镜。该工具生成包含所有活动滤镜的完整 filter 属性。滤镜按顺序应用：blur(5px) grayscale(100%) 表示先模糊，然后灰度。
▶opacity 和 transparency 有什么区别？
opacity 是影响整个元素的 CSS 滤镜，而 opacity 属性是独立的 CSS 属性。两者都使元素更透明，但 filter opacity(0.5) 是滤镜链的一部分，与其他滤镜的复合方式不同。
▶drop-shadow 和 box-shadow 有什么区别？
drop-shadow() 是一个滤镜，跟随元素的 alpha 通道，创建与非矩形形状（如文本或透明 PNG）匹配的阴影。box-shadow 仅在元素框周围创建矩形阴影。
▶我可以为 CSS 滤镜添加动画吗？
可以。CSS 滤镜可以使用 CSS 过渡或关键帧动画添加动画。这在滤镜值更改时创建平滑的视觉效果。例如，您可以在悬停时为 blur(0) 到 blur(5px) 添加动画。
如果这个工具帮到了你，可以请作者喝杯咖啡。
请我喝杯咖啡