CSS 阴影生成
Box Shadow Generator
一边预览一边叠多层盒阴影和文字阴影，并导出对应的 CSS。
用多层组合出一个阴影，输出为 `box-shadow`、`text-shadow` 或 `drop-shadow()` 滤镜。值得知道的是，一层几乎从来不对：真实的阴影是一个紧凑的深色接触项加一个宽阔的浅色环境项，而单个阴影只能是其中之一。页面会为此唠叨，并告诉你目标属性表达不了一层里的哪些部分。
- 第1层
- 第2层
预设
偏移大致随高度线性增长，模糊按它的平方根增长——平面之上一个点光源真实产生的就是这个样子。影子越大不透明度越低，同样的遮挡摊到了更大的面积上；把这层关系弄反，正是手调出来的影子看着像脏印子的原因。
CSS
box-shadow: 0px 1px 3px rgb(0 0 0 / 0.1), 0px 4px 8px -2px rgb(0 0 0 / 0.08);怎么用
说明它要放在什么上面
卡片或按钮用 `box-shadow`，文字用 `text-shadow`，任何有真实透明度的东西——图标或抠出来的 PNG——用 `drop-shadow()`。预览会随之改变，所以你看的永远是对的东西。
从预设开始
它们是两层叠加，偏移随高度线性增长，模糊随其平方根增长，不透明度随阴影散开而下降。最后那一点是人们手动时会弄反的部分，弄反了就是阴影看起来像一块污渍的原因。
把表面颜色设成你实际有的那个
在白色上调好的阴影在灰色页面上太弱，在深色页面上太强。表面色块就是为了让你对着组件真正所在的背景来调。
调整各层
每层的偏移、模糊、扩展和颜色，以及一个内阴影复选框。需要 alpha 时输入颜色而不是用色块——阴影颜色几乎总是半透明的，而原生颜色输入表示不了这一点。
复制声明
属性名随目标改变，所以你复制的东西可以原样粘贴。
常见问题
切换目标后我的内阴影和扩展消失了。它们去哪了？
它们被丢掉了，页面在输出上方会说明。`text-shadow` 的语法里没有内阴影也没有扩展——它接受 x、y、模糊和颜色，就这些。`drop-shadow()` 也没有内阴影和扩展。照样输出它们会产生一条浏览器整个丢弃的声明，那比丢掉撑不过去的那部分更糟。
为什么色块和我输入的不一致？
色块是 `<input type="color">`，它只懂 `#rrggbb`，根本没有 alpha。它显示的是你输入内容的尽力而为的十六进制，文本框才是权威。值里有 alpha 时，编辑文本。
`drop-shadow()` 只是一个更慢的 `box-shadow` 吗？
不是，它回答的是另一个问题。`box-shadow` 描的是边框盒，所以透明 PNG 得到一个矩形。`drop-shadow()` 跟随 alpha 通道，所以描的是实际的形状。它确实要多一次合成，也做不了内阴影和扩展，所以形状要紧时用它，其他时候用 `box-shadow`。
多少层算太多？
两三层就能做到 UI 需要的一切。每一层都是合成器在每次绘制时多跑的一次模糊，两百行列表上的六层阴影在手机上是可测量的帧率代价。预设停在三层就是这个原因。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
圆角形状生成
Border Radius Generator
每个角单独给值，含两值写法做出的类超椭圆形状，并导出 CSS。
CSS 滤镜实验场
CSS Filter Playground
在示例上叠加模糊、亮度、饱和度、色相和投影滤镜，并导出 CSS。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS，不重排任何声明，原本的记号序列一个不动。
CSS 渐变生成
CSS Gradient Builder
拖动色标做出线性、径向和锥形渐变，并按 sRGB 或 OKLCH 输出 CSS。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。