CSS 滤镜实验场
CSS Filter Playground
在示例上叠加模糊、亮度、饱和度、色相和投影滤镜，并导出 CSS。
把 CSS 滤镜函数叠加在一个样本上，并给你声明。预览由浏览器自己的 `filter` 属性渲染，所以你看到的从定义上就是这段 CSS 做的事，而不是它的近似。这里额外的东西是等价的 `feColorMatrix`：除了 blur 和 drop-shadow，这些函数每一个在 RGBA 上都是仿射的，所以一条八个函数的链坍缩成二十个数字。
预览
由浏览器自己的 filter 属性渲染，所以你看到的就是下面这段 CSS 做的事，而不是它的近似。
CSS
滤镜
怎么用
选择看什么
平涂色块显示特定颜色发生了什么，渐变显示包括灰色在内的一段范围发生了什么，你自己的图片显示你实际要滤的那个东西发生了什么。上线之前按最后一个来判断。
移动你需要的函数
任何留在中性值的都完全从输出里省略，所以 CSS 和你实际改过的一样短。顺序要紧，并且跟随列表的顺序。
想要的话最后加 drop-shadow
它是单独的一块，因为它接受三个数字和一个颜色而不是一个量，也因为它跟随 alpha 通道——描的是透明 PNG 的形状而不是它的盒子。
取 CSS，或者取矩阵
CSS 是给样式表的。`feColorMatrix` 是给 SVG 滤镜、着色器，或者任何跑八遍去做一次矩阵乘法能做的事值得避免的管线的。
常见问题
为什么矩阵里没有 blur？
因为它是空间性的：一个模糊后的像素取决于它的邻居，而颜色矩阵每次只看一个像素。drop-shadow 也一样。面板会点出哪些坍缩不了，把它们留作单独的一步，而不是悄悄丢掉。
hue-rotate(180deg) 没给我互补色。
它从来不给。这个函数是绕非线性 RGB 立方体亮度轴的旋转，规范用一个固定矩阵定义它——它不是感知性的色相旋转，也从来没被设计成那样。要真正的互补色，用颜色转换器或配色方案生成在 OKLCH 里旋转色相。
grayscale(1) 用的亮度系数对吗？
它用的是规范规定的那些：Rec. 709，应用在伽马编码的值上。把亮度权重应用在非线性值上，严格说是错的——正确的去饱和会先线性化。规范说要这么做，浏览器也这么做，所以这里复现这个不匹配而不是纠正它，因为和浏览器一致才是要点。
这覆盖 backdrop-filter 吗？
函数是一样的，所以你复制的值在那里也有效。不同的是来源——`backdrop-filter` 滤的是画在元素后面的任何东西，不是元素本身——所以这里的预览不会告诉你一块磨砂面板在你真实内容上看起来如何。粘进页面看。
可以从这些接进来
CSS 阴影生成
Box Shadow Generator
一边预览一边叠多层盒阴影和文字阴影，并导出对应的 CSS。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS，不重排任何声明，原本的记号序列一个不动。
亮度与色彩调整
Brightness & Colour Adjust
对着直方图调亮度、对比度、饱和度、色温和锐度。
CSS 阴影生成
Box Shadow Generator
一边预览一边叠多层盒阴影和文字阴影，并导出对应的 CSS。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。