🌓CSS 阴影生成器

怎么用阴影生成器

1. 先选一个预设，或者从默认那一层开始，拖动偏移、模糊、扩展和不透明度调到满意。
2. 点“添加一层”可以叠加阴影，真实的立体感通常需要两三层不同模糊度的阴影。
3. 切换预览的形状和背景色，在真实使用的底色上确认效果，然后复制 CSS。

常见问题

spread（扩展）是做什么的？

扩展会在模糊之前把阴影整体放大（正值）或缩小（负值）。小的负扩展配大模糊，就是现在大多数 UI 组件库里那种柔和又收紧的阴影。

怎么做内阴影？

把某一层的 inset 勾上。内阴影画在边框盒子内部，按钮按下态、输入框凹槽和新拟态的凹陷都靠它实现。

为什么要叠好几层？

真实光照既有贴近物体的接触阴影，也有大范围的环境阴影。用一层短距离、偏深、低模糊的阴影垫在一层长距离、很淡、高模糊的阴影下面，比单层阴影自然得多。