◰ CSS 阴影生成器

工具说明

CSS 的 `box-shadow` 给元素添加投影,是营造层次感、立体感和悬浮效果的关键。但它的参数顺序——水平偏移、垂直偏移、模糊半径、扩散半径、颜色、是否内阴影——靠记忆手写很容易出错。这个生成器让你拖动滑块直观调每个参数,实时预览阴影,再把代码复制走。

`box-shadow` 的值依次是:`offset-x`(水平偏移,正值向右)、`offset-y`(垂直偏移,正值向下)、`blur-radius`(模糊半径,越大越柔和)、`spread-radius`(扩散半径,正值放大阴影)、`color`(颜色,常带透明度)、可选的 `inset`(让阴影出现在元素内部)。多个阴影可用逗号叠加,做出更细腻的多层效果。全部在浏览器本地生成标准 CSS。

使用步骤

1. 用滑块设置水平偏移(offset-x)和垂直偏移(offset-y),决定阴影投向哪个方向。
2. 调模糊半径(blur)让阴影边缘更柔和或更锐利。
3. 调扩散半径(spread)放大或收缩整片阴影。
4. 选阴影颜色并设置透明度,真实的阴影通常是半透明的黑色或深色。
5. 需要内陷效果就勾选 `inset`;需要多层就再加一条阴影叠加。
6. 在预览区确认效果,复制生成的 `box-shadow` 代码到样式表。

适用场景

• 给卡片、弹窗、按钮加投影,做出悬浮和层级感。
• 设计 Material Design 风格的"海拔"层次(不同深度对应不同阴影)。
• 用 `inset` 内阴影做凹陷的输入框、开关或按下态。
• 叠加多层阴影做出柔和真实的环境光投影。
• 快速试出恰到好处的阴影参数,避免反复手改 CSS 刷新。

常见问题