box-shadow 是 CSS3 引入的视觉效果属性，用于在 HTML 元素的外边框周围创建阴影。与传统的图片阴影方案不同，CSS 阴影是纯代码实现的，加载速度快、可缩放、易于修改，是现代网页设计中实现层次感（Elevation）和深度的核心工具之一。
标准语法为：box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
offset-x：水平偏移量，正值向右，负值向左offset-y：垂直偏移量，正值向下，负值向上blur-radius：模糊半径，值越大阴影越模糊、越柔和spread-radius：扩散半径，正值扩大阴影面积，负值收缩color：阴影颜色，支持 hex、rgba、hsla 等格式inset：可选关键字，将外阴影变为内阴影本CSS阴影生成器操作简单直观，以下是详细的使用步骤：
基础阴影设计：打开工具后，左侧是参数调节面板，右侧上方是实时预览区域。拖动「水平偏移X」滑块控制阴影左右位置，拖动「垂直偏移Y」滑块控制阴影上下位置。通常将阴影设置在右下方（X为正值，Y为正值）可以模拟自然光照下的投影效果。调整「模糊半径」控制阴影边缘的柔和程度——值越大越模糊，越小越锐利。一般卡片阴影使用10-20px的模糊值效果最佳。
颜色与不透明度：点击颜色选择器或输入十六进制色值来设定阴影颜色。建议阴影颜色使用黑色或深灰色，并通过「不透明度」滑块调节透明度。通常0.1-0.3（10%-30%）的不透明度最为自然。使用RGBA格式可以精确控制alpha通道，比单纯的灰色更加真实。
内阴影效果：勾选「内阴影(inset)」选项后，阴影会从元素内部投射，产生凹陷或压痕效果。这非常适合创建按钮按下状态、输入框聚焦效果、卡片嵌入效果等UI设计场景。内阴影的参数调节与外阴影完全一致。
多重阴影叠加：当你对一组参数满意后，点击「添加为多重阴影」按钮，当前阴影配置会被保存到阴影列表中。然后你可以调节新参数并再次添加，最多支持叠加多层阴影。多重阴影的代码按添加顺序排列，前面的阴影显示在更上层。点击阴影列表中的「应用」按钮可恢复某层阴影的参数进行微调，点击「删除」按钮可移除该层阴影。
快速预设与代码复制：工具下方提供了12组精心设计的快速预设，涵盖Material Design风格、卡片悬浮、高程阴影、漂浮效果、内凹效果、霓虹发光等常见场景。点击任意预设即可一键应用。设计完成后，点击「复制代码」按钮即可将纯CSS代码复制到剪贴板，可直接粘贴到你的样式表中使用。
CSS阴影在现代网页和UI设计中无处不在，以下是几个典型应用场景：
卡片式设计（Card UI）：卡片是现代界面的基础组件，轻微的阴影可以赋予卡片层次感，使其从背景中"浮"出来。Material Design规范推荐使用多层阴影表示不同的高度层级：休息态使用轻微阴影，悬浮态增加阴影深度，按下态使用内阴影。例如电商平台商品卡片、仪表盘数据卡片、博客文章摘要卡片等都广泛使用阴影效果。
按钮交互反馈：按钮的阴影状态可以传达交互反馈。默认状态的按钮带有轻微外阴影表示可点击；鼠标悬停时阴影加深、元素微上移表示响应；按下时使用内阴影模拟被按下的凹陷效果；禁用状态去除阴影表示不可交互。这种视觉反馈极大提升了用户体验和界面的直观性。
模态框与弹窗：弹窗（Modal）和抽屉（Drawer）需要明显区别于背景内容，使用大面积弥散阴影（如0 8px 32px rgba(0,0,0,0.25)）可以创建强烈的深度对比，让用户的注意力自然聚焦在弹窗内容上。同时配合半透明背景遮罩，可以实现专业的对话框效果。
发光与霓虹效果：通过将阴影颜色设为亮色（如蓝色、青色、紫色）并增大模糊半径，可以实现发光（Glow）和霓虹（Neon）效果。这在暗色主题网站、科技感设计、游戏UI中非常流行。使用多重发光阴影叠加还能创造出更丰富的光晕层次。
CSS阴影的性能考虑：box-shadow 是 GPU 加速的属性，在现代浏览器中渲染性能优秀。但大面积、高模糊值的阴影仍可能导致重绘性能下降，特别是在动画中使用时。建议避免在频繁动画的元素上使用大面积阴影，或者使用 will-change: transform 属性提示浏览器优化。对于静态阴影，现代浏览器会自动进行优化处理。
drop-shadow vs box-shadow：除了 box-shadow，CSS 还有一个 filter: drop-shadow() 函数。两者的区别在于：box-shadow 是给元素的矩形边框添加阴影，忽略透明部分；而 drop-shadow 会根据元素的alpha通道（透明区域）来投射阴影，对于PNG图片、SVG图标等有透明区域的元素，drop-shadow 能产生更自然的阴影效果。
相关CSS属性：除了 box-shadow，现代CSS还提供了 text-shadow（文字阴影）、filter: drop-shadow()（基于透明度的阴影）、backdrop-filter: blur()（背景模糊）等视觉效果属性。text-shadow 不支持 spread-radius 和 inset，语法更简单。将这些属性组合使用，可以创造出极其丰富的视觉效果。
无障碍设计（a11y）提示：使用阴影表示交互状态是一种视觉暗示，但不应作为唯一的交互状态指示器。对于色盲或低视力用户，应同时配合边框颜色变化、文字标签变化等多元线索。例如按钮按下时不仅使用内阴影，还应改变背景色和文字颜色。
box-shadow 是给整个元素框添加阴影，支持 inset 内阴影和 spread 扩散半径；text-shadow 仅给文字添加阴影，不支持 inset 和 spread。两者的语法结构相似，但应用场景不同——box-shadow 用于UI组件，text-shadow 用于排版美化。
不同浏览器对阴影的渲染算法存在微小差异，特别是在高模糊半径时。为最大化兼容性，本工具生成的代码已包含 -webkit-box-shadow 前缀。如果阴影颜色使用 rgba() 格式而非 opacity 属性，渲染一致性会更好。
使用负的 spread-radius 配合偏移即可实现。例如底部单影：box-shadow: 0 10px 10px -5px rgba(0,0,0,0.2); 其中 -5px 的 spread 会收缩阴影，结合 Y 偏移使得只有底部显示阴影。工具中的"底部单影"预设就是此效果。
推荐使用 rgba()，因为它将颜色和不透明度合为一体，代码更简洁且兼容性更好。hex 颜色需要配合 opacity 属性才能实现透明阴影，而 opacity 会影响整个元素（不只是阴影）。本工具默认生成 rgba 格式的代码。
本工具为纯前端实现，数据不上传服务器。配置保存在浏览器本地（localStorage），下次打开工具时会自动恢复上次的阴影设置。清除浏览器数据后配置会丢失，建议在满意后及时复制CSS代码保存。
CSS 标准理论上支持无限多层阴影（用逗号分隔）。本工具界面限制为最多添加8层，这已经远超日常设计需求。实际项目中3-4层阴影就能创造出非常丰富的层次效果。添加过多层数可能导致性能下降和代码冗余。