CSS 阴影生成器

工具简介：CSS Box Shadow 生成器

CSS Box Shadow 生成器用于快速生成阴影样式，支持外阴影与内阴影，实时预览并输出可直接使用的 CSS 代码。

什么是 CSS Box Shadow 生成器？

该工具帮助你通过可视化参数配置元素阴影（offset、blur、spread、color），无需手动拼接参数即可得到标准的 box-shadow 代码。

如何使用

1. 调整水平/垂直偏移、模糊半径与扩散半径。
2. 选择阴影颜色与透明度。
3. 需要内阴影时勾选 inset。
4. 复制生成的 CSS 代码并应用到样式中。

常见应用场景

• 卡片、按钮、浮层等组件的层次感增强
• 设计稿阴影参数落地为代码
• 快速微调阴影强度与方向
• 构建轻量的 UI 立体感效果

❓ 常见问题 FAQ

Q1：阴影太重或太淡？
A：优先调整模糊半径与透明度，再微调扩散半径。

Q2：阴影方向不对？
A：水平/垂直偏移为正表示向右/向下，负值相反。

Q3：什么时候用 inset？
A：需要内凹效果或输入框内阴影时使用 inset。

功能特点

• 实时预览：所见即所得的阴影效果
• 完整参数：偏移、模糊、扩散、颜色与透明度
• 内外阴影：一键切换 inset
• 一键复制：输出标准 CSS 代码

参数说明

• Offset X / Y：阴影在水平与垂直方向的偏移距离
• Blur：阴影模糊程度，数值越大越柔和
• Spread：阴影扩散范围，正值变大，负值收缩
• Color：阴影颜色与透明度

CSS 代码示例

外阴影

box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15);

内阴影

box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.25);

使用技巧

1. 卡片阴影建议使用较大模糊与较小扩散值
2. 悬浮态可以增加模糊并稍微上移偏移值
3. 多重阴影可通过逗号拼接实现层次感