CSS工具/滤镜效果生成器
滤镜效果生成器
应用和组合CSS滤镜并实时预览
预览
滤镜效果
0px
100%
100%
0%
0deg
0%
100%
100%
0%
预设
CSS代码
Loading...CSS Filter Effects Guide
Learn how to apply visual effects to elements
What is CSS Filter?
CSS filters let you apply graphical effects like blur, color shifts, and shadows to elements. Filters are commonly used for image manipulation but work on any element. Multiple filters can be combined to create complex visual effects, and they are GPU-accelerated for smooth performance.
How to Use This Tool
- Adjust individual filter sliders to modify effects
- Combine multiple filters for complex results
- Upload an image to see filters applied in real-time
- Use presets for quick styling, then copy the CSS
Pro Tips
- Use blur with brightness for frosted glass effects
- Combine grayscale with sepia for vintage photo looks
- Drop-shadow works better than box-shadow for irregular shapes
Browser Support
CSS filters are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The filter property has good compatibility, though some older browsers may need the -webkit- prefix.
常见问题
filter和backdrop-filter有什么区别？
filter应用于元素本身及其内容。backdrop-filter则应用于元素背后的区域，可创建毛玻璃效果（glassmorphism）。backdrop-filter需要元素具有半透明背景才能看到效果。例如：background: rgba(255,255,255,0.5); backdrop-filter: blur(10px);
如何创建灰度效果？
使用filter: grayscale(100%)可以将图像或元素变成完全的黑白。设置0%-100%之间的值可以部分去饱和。这通常用于禁用状态的元素或悬停时的反色效果。
blur值用什么单位？
blur()函数使用像素(px)单位。例如blur(5px)会应用半径为5像素的高斯模糊。较大的值会产生更模糊的效果。0表示完全不模糊。滤镜模糊是GPU加速的，性能良好。
drop-shadow和box-shadow有什么区别？
box-shadow为整个元素盒子创建阴影，即使元素有透明区域也保持矩形。drop-shadow则沿着元素内容的实际形状（包括透明度通道）创建阴影。因此对于PNG图像或复杂形状，drop-shadow更合适。
可以同时应用多个滤镜吗？
可以在filter属性中用空格分隔多个滤镜。例如：filter: blur(2px) brightness(1.2) contrast(1.1);。滤镜按从左到右的顺序应用，所以顺序可能会影响最终效果。