预览区域
点击上传图片或拖拽图片到此处
支持 JPG、PNG、GIF、WebP 格式
请上传图片预览滤镜效果
滤镜参数调节
生成的CSS代码
预设效果
CSS滤镜知识
什么是CSS滤镜？
CSS滤镜（filter）是CSS3引入的一组图像处理函数，允许开发者在不借助图像编辑软件的情况下，通过纯CSS代码对HTML元素（尤其是图片和视频）应用各种视觉效果。滤镜函数作用于元素的像素数据，在浏览器渲染管线中直接处理，无需额外的HTTP请求或图像文件。
常用滤镜函数详解
blur()：高斯模糊效果，参数为模糊半径（如 blur(5px)）。值越大模糊程度越高，常用于背景虚化、焦点转移等场景。
brightness()：亮度调整，参数为百分比（如 brightness(1.5) 表示亮度提高50%）。值小于1变暗，大于1变亮。
contrast()：对比度调整，参数为百分比（如 contrast(1.2)）。值小于1降低对比度，大于1提高对比度。
saturate()：饱和度调整，参数为百分比（如 saturate(0) 完全去色，saturate(2) 饱和度翻倍）。
hue-rotate()：色相旋转，参数为角度（如 hue-rotate(90deg)）。将元素每个像素的色相沿色轮旋转指定角度。
sepia()：棕褐色调，参数为百分比。将图片转换为类似老照片的棕褐色调，100%时完全呈现复古效果。
grayscale()：灰度转换，参数为百分比。100%时图片完全变为灰度，0%时保持原色。
invert()：颜色反转，参数为百分比。100%时颜色完全取反，常用于夜间模式或特效。
opacity()：透明度调整，参数为百分比。与CSS opacity属性不同，opacity滤镜仅影响视觉呈现，不改变元素的事件响应。
drop-shadow()：投影效果，参数为水平偏移、垂直偏移、模糊半径和颜色（如 drop-shadow(2px 4px 6px rgba(0,0,0,.5))）。与box-shadow不同，drop-shadow会考虑元素的透明通道，只对实际可见的像素生效。
使用教程
本CSS滤镜生成器操作简单直观，以下是详细的使用指南：
上传图片：点击"选择图片"按钮或直接将图片拖拽到上传区域，工具会立即在预览区域显示图片。支持JPG、PNG、GIF、WebP等常见图片格式。上传的图片完全在本地浏览器中处理，不会上传到任何服务器。
调节滤镜参数：在滤镜参数调节区域，您会看到多个滑块控件，分别对应不同的滤镜效果。拖动滑块即可实时看到预览区域的图片变化。每个滤镜都是独立控制的，可以单独调节也可以组合使用。
应用预设效果：如果不确定如何调节参数，可以直接点击预设效果按钮（如"黑白""复古""柔焦"等），工具会自动设置对应的滤镜组合。您还可以在此基础上进一步微调。
复制CSS代码：调节到满意的效果后，点击"复制CSS代码"按钮，即可将生成的CSS代码复制到剪贴板。代码格式为 filter: blur(5px) brightness(1.2) contrast(1.1) ...;，可直接粘贴到您的CSS文件中使用。
重置滤镜：点击"重置所有滤镜"按钮，所有参数会恢复到默认值（即无滤镜状态）。
应用场景
CSS滤镜在Web开发中有着广泛的应用场景，以下是几个典型的使用案例：
图片特效处理：在电商网站中，为商品图片添加hover滤镜效果（如hover时增加亮度或饱和度），可以吸引用户注意力，提升点击率。在图片画廊中，未选中的图片可以降低饱和度，选中时恢复原色，形成视觉层次。
视频播放器界面：在视频播放器中，CSS滤镜可以实时应用于video标签，实现视频特效（如黑白模式、复古滤镜、亮度调节等）。用户可以在不重新编码视频的情况下切换不同的视觉效果。
暗色模式适配：在暗色主题的网站中，使用CSS滤镜的invert和brightness函数，可以快速将亮色图片转换为暗色模式下的合适显示效果，避免亮色图片在暗色背景中过于刺眼。
头像处理与隐私保护：在社交媒体或论坛中，可以使用CSS blur滤镜对用户上传的头像进行模糊处理，保护用户隐私。或者使用grayscale滤镜将彩色头像转为灰度，用于表示"离线"或"已注销"状态。
扩展知识
滤镜的性能影响：CSS滤镜会在GPU上执行图像处理，不同滤镜的性能开销差异很大。blur和drop-shadow由于需要计算像素邻域，性能开销较大；而brightness、contrast、saturate等简单色彩变换性能开销较小。在动画或滚动场景中应谨慎使用高模糊度的blur滤镜，避免造成页面卡顿。
滤镜与动画的结合：CSS滤镜属性支持transition和animation，可以创造出丰富的动态效果。例如 transition: filter 0.3s ease 可以实现滤镜效果的平滑过渡。结合JavaScript，还可以实现鼠标跟随、滚动触发等交互效果。
滤镜的层叠顺序：当多个滤镜函数同时应用时，它们按照从左到右的顺序依次执行。这意味着 filter: blur(5px) brightness(1.5) 和 filter: brightness(1.5) blur(5px) 的结果可能不同（尽管对于这两个函数来说结果相同）。理解层叠顺序对于实现复杂的滤镜组合至关重要。
相关工具推荐：除了CSS滤镜生成器，您还可以使用我们的CSS阴影生成器、CSS渐变文字生成器、图片滤镜工具等，组合使用可以创造出更加丰富的视觉效果。
CSS滤镜支持哪些浏览器？
CSS filter属性在现代浏览器中已有广泛支持。Chrome 53+、Firefox 35+、Safari 9.1+、Edge 12+均支持filter属性。IE浏览器不支持，但可以通过SVG滤镜实现兼容。
CSS滤镜会影响性能吗？
是的，某些滤镜（尤其是blur和drop-shadow）在GPU渲染时开销较大，可能导致页面卡顿。建议对动画元素谨慎使用高模糊度的blur滤镜，或考虑使用will-change属性提示浏览器优化。
drop-shadow和box-shadow有什么区别？
drop-shadow滤镜会根据元素的透明通道生成阴影，只对实际可见的像素生效，适合给PNG透明图片加阴影。box-shadow则是给元素的外边框盒模型添加阴影，不区分透明区域。
CSS滤镜可以叠加使用吗？
可以。CSS filter属性支持多个滤镜函数同时应用，按从左到右的顺序依次执行。例如filter: blur(5px) brightness(1.2) contrast(1.1)会依次应用模糊、亮度和对比度调整。
滤镜效果可以用在视频上吗？
可以。CSS filter属性可以直接应用于video标签，为视频实时添加滤镜效果。这在制作视频播放器特效、视频编辑器界面时非常有用。
上传的图片会存储到服务器吗？
不会。本工具完全在浏览器本地运行，所有图片处理都在客户端完成，不会上传到任何服务器，保障您的隐私安全。