CSS 阴影生成器

生成多层 CSS box-shadow,提供实时预览、内阴影开关与精细参数控制。

图层1
生成多层 CSS box-shadow,提供实时预览、内阴影开关与精细参数控制。
图层设置
图层 1
px
px
px
px
预览
将 box-shadow 值复制到你的 CSS 中。
box-shadow
CSS 输出
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

什么是 box-shadow?

生成多层 CSS box-shadow,提供实时预览、内阴影开关与精细参数控制。

box-shadow 是一个 CSS 属性,用于在元素外部(或内部)绘制一个或多个阴影。

每个阴影由水平/垂直偏移、模糊半径、可选的扩展值以及带透明度的颜色组成;加上 inset 就会变成内阴影。

多个图层用逗号分隔,可以叠加出层次感、发光或清晰的边缘效果。

  • 小偏移 + 大模糊可形成柔和的浮起感。
  • 更高不透明度 + 小模糊能得到更锐利的边缘。
  • 外阴影配合内阴影可增强立体感。
  • 图层数量尽量少,以获得更好的性能。