CSS盒阴影生成器

CSS盒阴影生成器

CSS盒阴影生成器让您可以可视化设计 box-shadow 效果并即时复制生产就绪的 CSS 代码。您可以堆叠多个阴影图层，从受 Material Design、Tailwind CSS 和新拟态 (Neumorphism) 启发的精选预设中进行选择，或者直接在预览上拖拽来调整阴影位置。所有操作都在您的浏览器中运行——您的代码永远不会离开当前页面。

如何使用 CSS盒阴影生成器

1. 调整阴影控件 — 使用滑块设置水平偏移 (X)、垂直偏移 (Y)、模糊半径和扩散半径。您也可以直接在预览区域拖拽以直观地重新定位阴影。
2. 选择颜色和透明度 — 使用颜色选择器选取阴影颜色，并通过透明度滑块微调透明度。预览将实时更新。
3. 添加多个图层或预设 — 点击+ 添加阴影图层来堆叠阴影以获得真实的深度感。或者选择一个精选预设（Material、Tailwind、新拟态等），从经过验证的设计开始。
4. 复制 CSS — 点击复制获取生成的 box-shadow 代码，并直接粘贴到您的样式表中。

了解 box-shadow 语法

专业盒阴影设计技巧

• 层叠多个阴影 — 现实世界的物体投射的是复杂的阴影。使用 2-3 层阴影（一层柔和的环境层 + 一层锐利的主光源层）比单层阴影产生的结果要真实得多。
• 使用低透明度 — 透明度在 8-20% 之间的阴影看起来最自然。避免使用高透明度的纯黑阴影，因为它们看起来生硬且过时。
• 统一光照方向 — 在整个 UI 中保持阴影偏移的一致性，以模拟单一光源。不一致的阴影会破坏视觉错觉。
• 彩色阴影 — 尝试使用元素背景颜色的深色调，而不是纯黑色，以获得更和谐、现代的外观。
• 负扩散值 — 负扩散值会使阴影比元素本身更小，从而创建一种微妙的接触阴影，使元素在没有明显边缘的情况下显得更稳固。

流行阴影样式解析

• Material Design 高度 (Elevation) — 使用两个阴影层：一个较柔和的环境阴影和一个较锐利的关键阴影。不同的高度级别 (1-5) 会逐渐增加偏移和模糊。
• Tailwind CSS 工具类 — Tailwind 提供了 shadow, shadow-md, shadow-lg, shadow-xl 和 shadow-2xl 类，每一个都使用了针对常见卡片和模态框场景优化的双层阴影。
• 新拟态 (Neumorphism) — 使用两个相反方向的阴影（一亮一暗）来创建柔和的挤压塑料效果。在浅灰色背景上效果最佳，因为此时两个阴影都清晰可见。
• 玻璃拟态 (Glassmorphism) — 将微妙的阴影与背景模糊 (backdrop-filter blur) 和半透明背景结合使用。阴影在磨砂玻璃效果下方增加了深度。

常见问题解答

什么是 CSS box-shadow 属性？

CSS box-shadow 属性用于在元素的框架周围添加阴影效果。它接受水平偏移、垂直偏移、模糊半径、扩散半径和颜色等值。多个阴影可以用逗号分隔，以创建分层的深度效果。

如何在 CSS 中创建多个盒阴影？

通过用逗号分隔每个阴影定义来创建多个盒阴影。例如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1)。每个阴影都渲染在前一个阴影之上，第一个阴影显示在最顶层。

box-shadow 和 drop-shadow 有什么区别？

box-shadow 将阴影应用于元素的矩形框，而 filter: drop-shadow() 则遵循包括透明区域在内的实际形状。box-shadow 支持扩散半径和内阴影模式，而 drop-shadow 则不支持。对于标准的矩形元素，box-shadow 更常用且性能更好。

什么是内阴影 (inset box shadow)？

内阴影出现在元素内部而不是外部。它是通过在阴影值前添加 inset 关键字创建的。内阴影常用于按钮按下效果、输入框样式以及创建凹陷或雕刻外观。

微妙的卡片效果有哪些推荐的 box-shadow 值？

一种流行的微妙卡片阴影使用两个图层：0 1px 3px rgba(0,0,0,0.12) 用于近处阴影，0 1px 2px rgba(0,0,0,0.24) 用于勾勒轮廓。Tailwind CSS 为其默认阴影工具使用 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)。