CSS 盒子阴影生成器

创建并复制阴影

1. 编辑每层的水平和垂直偏移、模糊、扩展、颜色及不透明度。需要在盒子内部显示阴影时选择内阴影。
2. 添加、复制或移动图层以调整效果。保留 1–8 层；字段未完成或超出编辑器限制时，当前代码会被清除，直到修正为止。
3. 在适应大小或 100% 视图中检查预览，然后复制声明。将其粘贴到要设置样式的元素的 CSS 规则中。

了解各个图层

正的水平和垂直偏移会将阴影向右和向下移动。模糊会柔化边缘；模糊为零时边缘清晰。扩展改变大小，而非柔和程度。

不透明度属于每个阴影颜色，而不是整个盒子。不透明度为 50% 的阴影在代码中仍精确保持 50%；其颜色不会转换为经过四舍五入的 alpha 字节。

第一个图层在其绘制类别中最靠前。外阴影始终位于盒子背景后方，内阴影则位于背景上方、边框下方。移动行不能跨越这些类别。

长度接受点或逗号以及最多两位小数；不透明度接受最多一位。这些是有限制的编辑器控件，并非适用于所有有效 CSS 表达式的解析器。生成的代码始终使用小数点。

实用的阴影实验

初始示例将一个数值为 0、2、4、0 像素、不透明度为 12.5% 的小型柔和阴影，与一个数值为 0、8、16、-4 像素、不透明度为 20% 的较宽阴影组合。每一行对应代码中的一个阴影项。

要获得清晰的轮廓效果，可将外阴影层的偏移和模糊设为零，并设置正扩展。它仍是阴影，不是导出的边框属性。

试试模糊为零、偏移为正的内阴影层，观察其清晰的内侧边缘。更改表面颜色并使用 100% 视图，而不改变阴影声明。

了解预览的内容

此编辑器生成 1–8 个以 CSS 像素为单位的 sRGB box-shadow 图层。它不导入 CSS、不生成 filter drop-shadow、不选择选择器，也不导出完整样式表或图像。

预览中的盒子大小、不透明颜色和圆角半径仅用于提供背景。元素本身的几何形状和背景可能改变同一声明的外观。

适应大小会缩放整个预览。使用可滚动的 100% 视图仔细查看。预览空间有限，可能裁剪模糊边缘；不同浏览器和显示器绘制的像素不一定相同。

透明或收缩至不可见的阴影可能有效但看不见。如果浏览器无法预览当前声明，工具会提示，而不会替换为其他效果；有效代码仍可复制。

阴影留在页面内

阴影编辑和代码生成均在本地运行，不会上传或保存您的数值。仅在您选择时才会复制。网站的一般隐私政策仍然适用。