阴影生成器

可视化 box-shadow 代码生成

预设

阴影层

#1
X Offset0px
Y Offset4px
Blur12px
Spread0px
#000000

预览

CSS 输出

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

关于阴影生成器

CSS阴影生成器可视化生成box-shadow和text-shadow代码,支持多层阴影/模糊半径/扩展/颜色调整。实时预览,一键生成阴影CSS。

使用方法

  1. 选择阴影类型(盒阴影/文字阴影)
  2. 调整偏移/模糊/扩展/颜色
  3. 可添加多层阴影
  4. 复制生成的CSS代码

常见问题

box-shadow的4个值分别是什么?
依次是:X偏移(水平) Y偏移(垂直) 模糊半径 扩展半径。例如'2px 2px 5px 0px rgba(0,0,0,0.3)'是右下方带模糊的阴影。
内阴影怎么做?
在box-shadow值前加inset关键字。如'inset 0 0 10px rgba(0,0,0,0.5)'创建内凹效果,常用于输入框聚焦状态。
多层阴影有什么用?
叠加多层阴影创建更真实的深度感。例如近处深色小阴影+远处浅色大阴影模拟材质设计(Material Design)的层级效果。