CSS 滤镜生成器

创建滤镜序列

1. 选择滤镜类型并添加一行。新行默认使用视觉上无变化的设置；初始示例包含亮度和饱和度。类型可以重复，最多添加十二行。
2. 修改数值，启用或排除行，并通过上移、下移或复制调整顺序。每个函数接收前一个函数的结果，因此顺序可能改变效果。
3. 在相同比例下比较滤镜效果和原始示例，也可从适应切换到 100% 并滚动查看。即使选择原始视图，复制的仍是显示的声明；启用字段无效时没有当前结果。

理解函数顺序

滤镜从左到右依次处理，而不是以逗号分隔的阴影堆叠。两行模糊会保留为两个调用。关闭某行会排除该调用，再次启用时仍处于原来的位置。

此编辑器允许亮度、对比度和饱和度超过 100%；灰度、反转、不透明度和棕褐色限制在 0–100%。色相角保留输入的圈数，例如 -450deg 不会自动改写为 270deg。

drop-shadow 使用当前输入的 alpha 轮廓，包括之前效果的结果。阴影的第三个长度和 blur() 使用以 CSS 像素为单位的高斯标准差，不等同于 box-shadow 的模糊半径。没有 inset 或 spread；更多阴影可用重复调用。

已启用但视觉上无变化的函数仍产生滤镜值，可能影响元素的分组、堆叠或定位。清空滤镜或关闭所有行可生成 filter: none;。

顺序和透明度示例

示例依次使用 brightness(125%)、blur(1.25px)、偏移 -6px 和 8px、标准差 3px、颜色 rgb(20 40 80 / 35%) 的阴影，以及 blur(0.5px)。排除阴影后，两次模糊仍保持原有顺序。

假设不透明通道的值为四分之一，先 brightness(50%) 再 invert(100%) 得到八分之七；反过来得到八分之三。这说明顺序的影响，并非对浏览器像素的精确预测。

连续两个 opacity(50%) 可将 alpha 降为四分之一。零偏移的不透明阴影对半透明内容不一定是中性效果；完全透明的阴影不会增加不透明度。

编辑和预览限制

数值编辑器支持十种函数类型，使用 px、百分比、角度、六位十六进制阴影颜色及单独的不透明度。范围是界面限制，并非完整 CSS 语法。不支持任意 CSS 导入、自定义 SVG 滤镜图、图片上传、远程图片、动画或栅格导出。

固定示例仅供说明，并非你的照片或页面。透明空洞和半透明图形展示轮廓效果。实际内容、背景、布局和浏览器渲染可能不同；这不是颜色、可读性或对比度认证。

适应模式缩放整个逻辑画布，不会再次缩放输入的 CSS 长度。100% 使用 CSS 坐标比例并允许局部滚动，不保证与设备像素一一对应。边距为近似值，模糊边缘可能被裁剪，复杂序列在适应模式下可能很小。

启用字段的无效输入会移除当前 CSS 和正常预览，不保留过时结果。关闭的行保留输入但不参与 CSS 或有效性检查。仅预览功能不可用时，不改变有效 CSS 和复制功能。

无需上传图片的本地样式编辑

此工具不新增上传、远程图片请求、草稿历史、包含设置的链接或包含设置的遥测。示例由代码绘制，复制需主动操作。这并不保证网站现有服务、扩展程序或自行保存的副本中的数据被删除。