CSS阴影生成器

CSS 阴影生成器使用指南

📌 简介

CSS 阴影生成器是一款面向前端开发者和设计师的可视化工具，通过滑块直观调节 box-shadow 的各项参数，实时预览阴影效果并生成对应的 CSS 代码。box-shadow 是让 UI 元素产生立体感、层次感最常用的 CSS 属性，但手写参数往往需要反复试错。本工具让您所见即所得，快速调出理想阴影。

📖 box-shadow 参数详解

box-shadow 可以接受最多 5 个参数：水平偏移（offset-x）、垂直偏移（offset-y）、模糊半径（blur-radius）、扩展半径（spread-radius）和颜色。inset 关键字可将阴影改为内阴影，产生凹陷效果。模糊半径越大，阴影边缘越柔和；扩展半径可以让阴影向四周扩张或收缩。透明度通常使用 rgba 颜色控制。

💼 常见应用场景

• 卡片阴影： 为卡片组件添加柔和的立体感。
• 按钮效果： 制造按钮的悬浮和按下反馈。
• 焦点提示： 用内阴影表示输入框的聚焦状态。
• 悬浮动效： hover 时切换阴影实现抬升效果。

⚙️ 使用步骤

1. 调节水平/垂直偏移，决定阴影的方向。
2. 调节模糊半径，决定阴影的柔和程度。
3. 调节扩展半径，控制阴影的扩散范围。
4. 选择阴影颜色，并通过滑块调节透明度。
5. 需要凹陷效果时勾选“内阴影”。
6. 复制生成的 CSS 代码粘贴到项目中使用。

⚠️ 注意事项

• 透明度建议保持在 10%-30% 之间，过高的透明度会让阴影过于突兀。
• 现代设计推荐使用大模糊半径 + 低透明度的柔和阴影，视觉更高级。
• 多个阴影叠加（用逗号分隔）可以创造更丰富的层次。

❓ 常见问题 (FAQ)