DevTulz Online

CSS Box Shadow 生成器

背景

什么是 CSS Box Shadow？

CSS box-shadow 属性在元素的边框周围添加阴影效果。阴影可以偏移、模糊、扩散、着色，并设置为 inset（内阴影）。多个以逗号分隔的阴影可以叠加，打造丰富的视觉效果。此生成器可让您直观地构建复杂的多层阴影，并将可直接粘贴的 CSS 复制到剪贴板。

如何使用 Box Shadow 生成器

  1. 调整 Offset X/Y、Blur 和 Spread 滑块以定位和塑造阴影。

  2. 点击颜色色块选择阴影颜色，使用 Opacity 滑块设置透明度。

  3. 开启「内阴影」可创建内发光或凹陷效果。

  4. 点击「+ 添加图层」可叠加多个阴影。

  5. 复制生成的 CSS 并粘贴到您的样式表中。

Keywords: CSS box shadow 生成器, box-shadow CSS, CSS 阴影工具, CSS 投影, 内阴影, 多层阴影, CSS shadow 在线工具