开发者 / CSS
CSS盒阴影生成器
直观生成CSS box-shadow：调整偏移量、模糊、扩展、颜色、不透明度和内阴影，支持多个图层、预设和实时预览，然后复制CSS。
CSS盒阴影生成器: 每个图层都会成为box-shadow列表中的一个阴影：包括水平和垂直偏移量、模糊半径、扩展，以及使用rgb()表示并在斜杠后写入不透明度的颜色。图层按首个图层在最上方的顺序绘制。你可以更改预览框的圆角半径、颜色和背景，以匹配你的设计；阴影会沿圆角显示，就像在页面上一样。 完全在浏览器中本地运行，文件不会上传到服务器。
- 类别
- 开发者工具
- 使用次数
- 在浏览器中
- 费用
- 免费·无需注册
- 可用性
- 可直接使用
完全在浏览器中运行
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
这些值依次为向右偏移、向下偏移、模糊、扩散和颜色。多个较薄的图层比一个厚重的阴影看起来更自然；后面的图层会绘制在前面的图层下方。
预设
层级感
设计系统使用阴影来显示元素悬浮在页面上方的距离：静止的卡片使用小而紧凑的阴影，菜单或对话框则使用更大、更柔和的阴影。固定使用几个层级，而不是到处使用不同阴影，可以让界面感觉更统一。
在深色背景上，阴影几乎看不出来；这时，较浅的表面颜色或细边框也能起到相同作用。为按钮和卡片搭配使用CSS渐变。
阴影与性能
大范围模糊的绘制成本高于小范围模糊；当许多带阴影的元素同时滚动或播放动画时，这一点尤其重要。要为阴影添加悬停动画，与其每一帧都改变box-shadow，不如在伪元素上使用不透明度淡入第二层更强的阴影，这样更平滑。
使用方法
- 从预设开始，或调整首个图层的偏移量、模糊、扩展和不透明度。
- 添加更多图层，让阴影更柔和、更逼真；也可以勾选内阴影，在盒子内部生成阴影。
- 复制box-shadow声明。
隐私与限制
所有操作都在浏览器中运行；你最近使用的阴影只保存在此浏览器中。
相关工具
常见问题
box-shadow中的四个数字是什么？
它们依次是水平偏移量（正值向右移动阴影）、垂直偏移量（正值向下移动阴影）、模糊半径（数值越大越柔和，且不能为负数）和扩展（正值使阴影比盒子更大，负值使其更小）。颜色写在最后。
怎样让阴影看起来更自然？
使用较低的不透明度，让阴影向下偏移，仿佛光线来自上方；再组合两个或更多图层：在盒子附近使用较小、更清晰的图层，在更远处使用更大、更柔和的图层。略微使用负扩展，可以避免较大的模糊在两侧显得过于明显。
内阴影有什么作用？
它会将阴影绘制在盒子内部，而不是外部，让盒子看起来像被按了进去，适合输入框和按下状态的按钮。
为什么图片上看不到我的阴影？
box-shadow会沿元素的盒子绘制，而不是沿图片内部的形状绘制。要为透明PNG生成轮廓，请改用CSS的filter drop-shadow()。
免费工具·使用在浏览器中次·无需账户