CSS滤镜生成器

工具用途

当你需要快速试验 blur、brightness、contrast、saturate 等滤镜参数时，本工具可通过拖动滑块即时预览并生成可直接粘贴的 CSS 代码。

核心功能

• 支持 blur、brightness、contrast、saturate、grayscale、sepia、hue-rotate、invert、opacity 等常用滤镜参数。
• 支持 drop-shadow 阴影偏移与模糊调节，可直接合并到 filter 链中。
• 支持原始效果与滤镜效果并排预览，便于快速对比调参结果。
• 支持常用风格预设一键套用，提升设计和调试效率。
• 支持一键复制完整 CSS 代码，便于前端项目直接复用。

使用步骤

1. 先在右侧滑块区域调整各项滤镜参数，观察即时变化。
2. 如需快速开始，可先选择一个预设效果再微调细节。
3. 通过预览区对比原始效果与滤镜效果，确认视觉表现。
4. 在代码区域复制 filter 声明并粘贴到样式文件中。
5. 若需要重新尝试方案，可点击重置参数恢复默认值。

应用场景

• 网页图片灰度、复古、反色等视觉风格快速试验
• 按钮悬停态与卡片强调态的滤镜参数调试
• 活动页视觉稿到前端代码的样式还原与交付
• 前端教学中 filter 属性语法与叠加规则演示

使用建议

• 建议先从亮度和对比度开始调节，再叠加其他效果。
• drop-shadow 与 blur 同时使用时，注意模糊量不要过高。
• 若要保证可读性，可在深色背景下再检查一遍效果。
• 上线前请在目标浏览器做兼容性验证，确保视觉一致。

隐私说明

本工具不会上传你的参数与代码内容，所有滤镜计算和预览均在浏览器本地完成。