阴影生成器

box-shadow: 0px 20px 40px -10px rgba(0, 0, 0, 0.15);

这个工具能做什么

写 box-shadow 时总要反复试数值,这个工具把参数都做成了滑块:水平、垂直偏移,模糊半径,扩散半径,阴影颜色和透明度,还可以切换内阴影。预览是一张白色圆角卡片,调整时立刻能看到效果。

使用步骤

  1. 拖动偏移、模糊、扩散几个滑块,找到合适的阴影形状。
  2. 选阴影颜色,调透明度,需要的话勾选 inset。
  3. 点“复制 CSS 代码”,得到一行完整的 box-shadow。

常见问题

支持多层阴影吗?

一次生成一层。多层阴影可以分别生成后用逗号拼在一起。

颜色为什么输出成 rgba?

为了让透明度单独可调,工具会把你选的颜色转换成 rgba 写法。

更多工具见开发者工具箱; 要做应用商店预览图,可以用App Store 截图生成器。