CSS盒阴影生成器
直观调整多层阴影，再复制标准CSS用于卡片、按钮、对话框或其他界面元素。
使用步骤
如何使用
- 调整第一层阴影的偏移、模糊、扩展、颜色、透明度和内阴影。
- 按需增加图层，让效果更柔和或更有层次。
- 查看实时预览并复制box-shadow声明。
叠加阴影形成层次
单层阴影适合直接表现抬升。多层可组合贴近边缘的深色阴影与较宽柔和的阴影。CSS先列出的阴影在上方；若要突出锐利图层，请将它排在前面。
偏移、模糊和扩展
水平及垂直偏移移动盒子的阴影；模糊柔化边缘。正扩展在模糊前放大阴影，负扩展则缩小。控制项使用实用的像素范围，保持预览响应和声明易用。
内阴影与颜色透明度
开启inset在盒子内部绘制阴影，适用于按下状态或凹陷面板。复制的CSS将透明度转为rgba()的alpha值。预览和CSS都在浏览器本地生成。
常见问题
你可能还想知道
可以添加多少层？
最多八层。较少的图层通常更容易调整和维护。
负扩展有什么作用？
在模糊前缩小阴影形状，让大范围模糊更贴近盒子边缘。
复制的CSS适用于普通样式表吗？
适用。生成标准box-shadow声明，使用像素长度和rgba()颜色。
预览与所有网站完全一致吗？
使用浏览器CSS渲染器，但你页面的背景、圆角、元素尺寸及其他样式会改变最终效果。