CSS 滤镜生成器
创建并可视化自定义 CSS 图像滤镜
Preview
CSS Code
滤镜：无；
滤镜控制
0px
100%
100%
0%
0deg
0%
100%
100%
0%
流行滤镜
Vintage
Neon Glow
Polaroid
复古胶片
数字艺术
如何使用 CSS 滤镜
什么是 CSS 滤镜？
CSS 滤镜允许您对元素应用模糊或颜色偏移等图形效果。滤镜常用于图像和边框。滤镜可用于创建视觉效果，增强图像或创建独特的设计元素，而无需使用外部图像编辑工具。 它们通常用于图像、背景和边框。
滤镜可用于创建视觉效果、增强图像或创建独特的设计元素，而无需使用外部图像编辑工具。
支持的 CSS 滤镜属性
-
blur()- 对元素应用高斯模糊效果。 -
brightness()- 调整元素亮度。 -
contrast()- 调整元素的亮度。 -
grayscale()- 将元素转换为灰度。 -
hue-rotate()- 对元素应用色调旋转。 -
invert()- 反转元素的颜色。 -
opacity()- 调整元素的不透明度。 -
saturate()- 使元素饱和或不饱和。 -
sepia()- 将元素转换为棕褐色。
如何应用滤镜？
使用本工具生成的 CSS 代码，您可以为任何 HTML 元素应用滤镜。具体操作如下：
1. 选择元素
选择您要应用滤镜的 HTML 元素。这可以是图片、背景或其他任何元素。
2. 添加类名或ID
如果元素尚未拥有类名或ID，请添加一个以便通过CSS更轻松地定位。
3. 应用滤镜
在样式表或内联样式中使用CSSfilter属性应用生成的滤镜。
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. 组合多个滤镜
您可以通过将多个滤镜函数依次列出并用空格分隔来组合多个滤镜。
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);浏览器兼容性
CSS 滤镜在现代浏览器中广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。然而，较旧的浏览器如 Internet Explorer 不支持它们。
Chrome
Firefox
Safari
Edge
IE 11 (partial)