可视化设计 CSS 阴影
阴影能赋予界面深度：它们让卡片浮于页面之上，显示哪个按钮被按下，并将对话框与背后的内容区分开来。CSS 的 box-shadow 属性功能强大，但凭空调整它的五个数值非常困难。这款生成器提供滑块和实时预览功能，允许你叠加多个阴影以获得自然的效果，并输出干净的 CSS 代码，你可以直接复制粘贴到项目中。
功能特点
- 偏移、模糊、扩展、颜色和透明度控制，支持实时预览。
- 最多五层阴影合并为一个
box-shadow声明。 - 内阴影，用于实现按下和凹陷效果。
- 圆角半径和预览颜色，完美匹配你的设计。
- 预设效果，包含柔和、中等、生硬、多层、内阴影和发光等阴影样式。
- 一键复制 CSS，颜色采用
rgba()格式。
示例
在浅色背景上看起来很自然的多层阴影：
.card {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
0px 4px 8px 0px rgba(0, 0, 0, 0.07),
0px 16px 32px 0px rgba(0, 0, 0, 0.07);
border-radius: 16px;
}
阴影设计技巧
| 目标效果 | 推荐设置 |
|---|---|
| 白色背景上的柔和卡片 | y 4, 模糊 12, 透明度 8% |
| 悬浮下拉菜单或对话框 | 2–3 层，y 最高 24，模糊最高 48，每层透明度 7–12% |
| 复古“扁平”风格 | x 6, y 6, 模糊 0, 透明度 100% |
| 焦点或发光效果 | x 0, y 0, 模糊 16–24, 扩展 2–4, 品牌色 |
| 按下的输入框 | 内阴影，y 2, 模糊 6, 透明度 25–30% |
保持光源一致：如果一个组件的阴影向下投射，那么所有组件的阴影都应该向下投射。
相关工具
使用 CSS 渐变生成器 为你的卡片制作背景，使用 颜色转换器 在 HEX、RGB 和 HSL 之间转换颜色，或者使用 图片拾色器 从截图中提取颜色。