CSS 滤镜生成器
拖动滑块，预览和 filter 代码会同步变化。
输入的文字和文件不会发送到服务器，只在本浏览器中处理。
将文件拖到这里，或点击选择
CSS 代码
使用方法
- 页面已放入一张示例图。想用自己的图片，把它拖到下方上传区域即可。
- 拖动滑块或选择预设会立即生效。保持默认值的项目不会写入代码。
- 按住“按住查看原图”，可以和应用滤镜前的效果对比。
- 复制 CSS 代码直接使用；在支持的浏览器中，还可以点“下载”保存加了滤镜的 PNG 图片。
常见问题
filter 函数的顺序重要吗？
重要。滤镜会从左到右依次应用，顺序不同结果也会不同。本工具始终按固定顺序生成代码。
drop-shadow 和 box-shadow 有什么区别？
box-shadow 给元素的矩形盒子加阴影，drop-shadow 则沿着去掉透明部分后的实际形状加阴影，更适合透明背景的 PNG 和图标。
为什么看不到下载按钮？
不支持 Canvas 滤镜的浏览器（如部分 Safari）会隐藏该按钮，但 CSS 代码依然可以正常使用。