Box Shadow 生成器

告别单一、生硬的阴影。可视化设计具有层次感、深度感和物理质感的 CSS 阴影效果。 支持多层叠加,让你的 UI 元素瞬间立体。

广告占位符 - 支撑免费工具运行

👁️ 实时预览
💻 CSS 代码
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);

赞助商广告

如何设计出具有“高级感”的阴影?

在现代 UI 设计中,阴影不再仅仅是一个模糊的黑块。阴影承载了 视觉层级 (Z-index)物体深度 的信息。 为什么你的阴影看起来很脏、很假? 通常是因为你只使用了一层默认的阴影。

🚨 痛点 1:单一阴影导致的“脏”视觉感

解决方案: 现实世界中的阴影是多层光线叠加的结果。 尝试叠加 2-3 层阴影:一层是大范围、低透明度的扩散阴影(模拟环境光),另一层是小范围、略高透明度的近距离阴影(模拟遮挡光)。 本工具支持 无限层级叠加 ,助你实现这种细腻的渐变。

🚨 痛点 2:Neumorphism (新拟态) 效果难以调校

解决方案: 新拟态的核心在于“一深一浅”两组阴影。 通过设置一个左上角的白色阴影(高光)和一个右下角的深色阴影,可以营造出元素从背景中“挤压”出来的感觉。 使用本工具的 Inset (内阴影) 模式,还可以轻松做出凹陷效果。

Box Shadow 核心参数详解

  • X / Y Offset :偏移量决定了光线的方向。正值向右下,负值向左上。
  • Blur Radius :模糊半径越大,阴影边缘越柔和,元素看起来离背景越高。
  • Spread Radius :扩展半径可以增大或缩小阴影的整体尺寸。
  • Color & Opacity :高级设计通常使用深蓝色或深紫色作为阴影色,而非纯黑色,这样可以让 UI 看起来更通透。
代码已复制