CSS 滤镜生成器
一个用于生成和预览 CSS 滤镜属性的可视化工具。
滤镜设置
调整每个滤镜属性
预设
尝试预定义的滤镜样式
预览
在默认图片上查看生成的滤镜效果
原始
已过滤
Filter Preview
生成的 CSS
filter: none;CSS 滤镜函数说明
视觉效果
- • blur(px): 模糊效果
- • brightness(%): 亮度调整
- • contrast(%): 对比度调整
- • opacity(%): 不透明度调整
颜色效果
- • grayscale(%): 灰度效果
- • hue-rotate(deg): 色相旋转
- • invert(%): 颜色反转
- • saturate(%): 饱和度调整
- • sepia(%): 深褐色效果
使用技巧
- • 用空格分隔组合多个滤镜
- • 不仅适用于图片，也适用于任何 HTML 元素
- • 与 CSS 动画一起使用以获得动态效果
- • 使用 backdrop-filter 仅应用于背景