盒阴影生成器
可视化生成 CSS box-shadow 并实时预览。
Preview
box-shadow: 0px 4px 8px 0px #00000033;How to Use
- 使用可视化控件调整阴影参数：水平偏移（X）、垂直偏移（Y）、模糊半径、扩展半径和阴影颜色（含透明度）。拖动滑块时预览框实时更新。
- 切换 inset（内阴影）和 outset（外阴影）模式。外阴影营造元素悬浮于页面之上的效果；内阴影在元素内部制造深度感，适用于凹陷输入框、按压按钮或内发光效果。
- 一键复制生成的 CSS box-shadow 声明。如需复杂效果，可添加多个图层叠加阴影——每个图层以逗号分隔，从而实现拟物化、Material Design 投影等复杂视觉效果。
Frequently Asked Questions
- box-shadow 的四个值各代表什么？
- CSS box-shadow 接受：offset-x（水平偏移，正值向右）、offset-y（垂直偏移，正值向下）、blur-radius（阴影边缘柔化程度，0 为锐利）和 spread-radius（阴影扩展或收缩量）。负的 spread 值会使阴影比元素更小。
- 可以在一个元素上叠加多个阴影吗？
- 可以——点击添加层，按需叠加任意数量的阴影层，每层都是完整的阴影定义，CSS 从上到下渲染（第一个阴影在最上层）。拟物化效果（柔和 3D）和带有环境光与方向光的卡片浮起效果就是这样实现的。
- box-shadow 会影响浏览器性能吗？
- 简单阴影对性能影响可忽略不计。大模糊半径的复杂多层阴影可能触发重绘，在动画时尤为明显。对于动态阴影，优先考虑使用 filter: drop-shadow()，或对伪元素上固定阴影的 opacity 做动画，而非直接对 box-shadow 属性做动画。