CSS 阴影生成器

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

图层 1

选择图层以编辑参数，或添加、排序和移除图层来组合最终的阴影效果

图层设置
图层 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？

box-shadow 是一个 CSS 属性，用于在元素外部（或内部）绘制一个或多个阴影

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

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

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

使用方法

添加并调整阴影图层顺序，设置每层的偏移、模糊、扩展、颜色、透明度与内阴影模式，然后复制生成的 box-shadow 声明