正在准备工作区…
输入
正在准备工作区…
输出
结果将显示在这里。
使用方法
- 设置水平偏移、垂直偏移、模糊和扩展。
- 选择颜色与不透明度，按需启用“内阴影”。
- 检查预览，然后选择“复制 CSS”。
构建盒阴影
盒阴影可以让卡片与背景区分开，也能表现内凹表面。只需调整少量数值，无需制作图片。
调整几何参数与颜色时，预览持续显示阴影。圆角控制便于比较形状，但不会向复制结果添加无关声明。
偏移、模糊与扩展
水平和垂直偏移决定阴影相对元素的位置。负值向左或向上，正值向右或向下移动。
模糊会柔化边缘，不能为负值。扩展改变阴影的范围，负值收缩，正值扩大。
输入
0px 8px 24px 0px, black at 15%结果
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);单层外阴影：向下偏移 8px，模糊 24px，黑色不透明度 15%。
颜色与内阴影
取色器设置阴影颜色，不透明度控制 Alpha 值。较低的不透明度会让更多页面背景透出来。
“内阴影”将阴影移至盒子内部。工具仅生成一层阴影，多层阴影需在样式表中用逗号分隔。
使用 CSS
“复制 CSS”仅导出 box-shadow:。若需要与预览相同的圆角，请为元素单独设置 border-radius。
处理限制
文本输入最大 1 MiB。CSS 和 HTML 转换在工作线程中运行，限时 30 秒。颜色工具使用 sRGB；生成的样式仅供预览，需要在您的布局中测试。
延伸阅读MDN · box-shadow
?
常见问题
预览圆角会包含在 CSS 中吗？
不会。圆角仅影响预览。如需相同形状，请单独添加 border-radius 声明。
模糊与扩展有什么区别？
模糊柔化阴影边缘；扩展在模糊之前扩大或缩小阴影范围。
扩展可以为负值吗？
可以。负扩展会缩小阴影；模糊必须为零或正值。
可以创建内阴影吗？
可以。启用“内阴影”，复制的声明就会包含 inset 关键字。
支持多层阴影吗？
工具仅生成一层。可在样式表中将复制的值与其他阴影用逗号组合。