CSS box-shadow 阴影生成器

CSS 的 box-shadow 属性无需图片，就能在元素外部或内部绘制一个或多个阴影。本生成器根据偏移、模糊、扩展、颜色和不透明度写出属性值，校验你添加的额外图层，并在你自己的浏览器里把结果渲染到示例卡片上，所以预览与 CSS 实际效果完全一致。预设包括 Tailwind CSS 的阴影等级、平滑的五层阴影、焦点环和一组新拟物阴影。

使用方法

1. 选择一个预设，或保持“自定义”并设置偏移、模糊、扩展、颜色和不透明度。
2. 需要内阴影时勾选 inset。
3. 要做多层阴影或描边环效果，请每行添加一个额外图层。
4. 复制 CSS 这一行，并按你的页面调整预览卡片和背景的颜色。

计算公式

box-shadow: [inset] <x> <y> <blur> <spread> <color> [, 更多图层]

x 为正时阴影向右移动，y 为正时向下移动。模糊让边缘变柔和（不能为负）；扩展在模糊之前放大或缩小阴影——负的扩展可避免大模糊从两侧露出来。

示例

默认值——水平 0 px、向下 8 px、模糊 24 px、扩展 −4 px、黑色 20%——得到 box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.2);，在卡片下方形成柔和的阴影。再加一层 0 0 0 1px red，就能在不改变大小的情况下给卡片描一圈 1 px 的环。