阴影生成器 | CSS Box Shadow 工具

可视化的CSS Box Shadow生成器,支持实时预览。

0px
0px
10px
0px
20%
CSS Code
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

使用说明

  • 调整滑块以更改水平和垂直偏移、模糊半径和扩展半径。
  • 切换“内阴影”以创建内部阴影。
  • 使用控件更改阴影颜色和不透明度。
  • 复制生成的CSS代码以在您的项目中使用。

关于 Box Shadow

水平位移 (Offset X)

指定阴影的水平距离。正值将阴影向右移动,负值向左移动。

垂直位移 (Offset Y)

指定阴影的垂直距离。正值将阴影向下移动,负值向上移动。

模糊半径 (Blur Radius)

值越大,阴影变得越大且越淡。如果设置为0,阴影将是锐利的。

扩展半径 (Spread Radius)

正值增加阴影的大小,负值减小它。