盒阴影生成器

调整水平/垂直偏移、模糊半径、扩散半径与阴影颜色,实时预览元素阴影效果,支持外阴影与内阴影,一键生成标准的 box-shadow 样式代码。

阴影参数 已就绪
水平偏移
垂直偏移
模糊半径
扩散半径
阴影颜色
#000000
不透明度
 

拖动滑块即可实时预览;偏移为负值时阴影向左或向上移动,勾选「内阴影」将阴影绘制在元素内部。

实时预览与代码
阴影预览

          

生成的 CSS 将显示在这里。

说明
  • box-shadow 语法:box-shadow: [inset] offset-x offset-y blur-radius spread-radius color。
  • 多个阴影用逗号分隔可叠加,本工具生成单层阴影代码。
  • inset 关键字让阴影呈现在元素内部,适合凹陷效果。
  • 本工具完全在浏览器本地运行,输入的数据不会上传到任何服务器。