CSS 滤镜生成器
拖入一张图片(可选),拖动滑块,复制生成的 CSS filter 值。
点击或拖放图片以在其上预览效果,此步骤可选
工作原理
每个滑块都直接对应一个 CSS filter 函数
(blur()、brightness()、contrast()、
saturate()、grayscale()、sepia()、
hue-rotate()、invert())。停留在中性值的函数不会出现在输出中,
以保持复制出来的 CSS 简洁,其余函数用空格连接,因为 CSS 会按书写顺序依次应用链式滤镜函数。
这段字符串会直接设为预览图片自身的 filter 样式,所以你看到的就是真实效果,
而不是模拟结果。
你的图片以本地对象 URL 的形式加载,永远不会离开浏览器标签页,没有上传这一步骤。
常见问题
可以在自己的图片上预览吗?
可以,拖入任意图片,每个滑块都会立即更新实时预览。如果没有上传图片,滑块会改为在一个占位渐变图上预览效果。
滤镜会影响布局吗?
不会。CSS filter 是纯视觉效果,不会改变元素的盒子尺寸或位置,这一点不同于直接替换图片文件。因此在悬停或切换类名时应用它开销很低,因为不会触发重排。
我的图片会被上传到别的地方吗?
不会。预览使用你浏览器自身的 CSS 引擎,基于本地对象 URL 生成,不会上传任何内容。