CSS 阴影生成器

功能特性

滑块调节

取色器

内阴影开关

支持多层叠加

实时预览并输出 CSS

使用方法

1. 用滑块塑造阴影 —— 台面上的中性卡片展示的就是最终效果。

2. 真实的阴影往往是多层的：最多可叠加四层，也可以从预设（柔和 / 浮起 / 悬浮 / 内阴影）开始。

3. 切换台面底色，在白、灰、深色背景下检查阴影，然后复制 CSS。

关于这个工具

界面里逼真的阴影通常不止一层：一层紧贴、较深的阴影表示接触，另一层宽而柔和的阴影表示距离。这个生成器最多可以叠加四层 box-shadow，每层都能调整水平和垂直偏移、模糊、扩散、颜色、不透明度以及内阴影，舞台上的中性卡片会显示精确效果。预设提供了现成起点——柔和、浮起、悬浮和内阴影——还可以把舞台切换为白色、灰色和深色背景，检查阴影在各种底色上是否依然清楚。生成的 CSS 会按正确顺序列出各层并使用 rgba 颜色，可直接粘贴到样式表或设计令牌文件中。

常见问题

偏移、模糊和扩散分别是什么意思？

X、Y 偏移让阴影向右、向下移动（负值向左、向上）。模糊让边缘变柔和，数值越大越弥散。扩散在模糊之前放大或缩小阴影，负的扩散值能让柔和的阴影收在元素下方。

为什么要用多层阴影？

真实物体在贴近表面处投下清晰的阴影，远处则是柔和的阴影。一层小而深的阴影加一层大而淡的阴影，看起来比一层浓重的阴影更自然，大多数设计系统也是这样定义层级的。

内阴影（inset）有什么作用？

内阴影画在元素边框内侧而不是外侧，让元素看起来是凹进去的，常用于输入框、凹槽和开关。

阴影会影响性能吗？

静态阴影开销很小。在大量元素上给 box-shadow 做动画可能引起重绘，所以悬停效果可以改为给已经带阴影的伪元素做透明度动画，或者保持适中的模糊值。

为什么阴影在深色背景上看起来不一样？

深色阴影在深色表面上对比度很低。深色主题通常会降低阴影不透明度，改用更浅的表面颜色或细微的边框来表现层级。

功能特性

使用方法

关于这个工具

常见问题

相关工具