怎么做彩色 CSS 阴影？

调节颜色、模糊、扩散和偏移，工具实时预览 box-shadow 并给出可复制的 CSS，支持多层阴影。

怎么让阴影看起来自然？

把阴影染向表面自身的色相而非纯黑，并用柔和的模糊配小偏移，效果更真实现代。

可以——box-shadow 接受逗号分隔的列表，工具支持叠加多层制造层次。

从主色推导带色相的彩色投影，避免纯黑阴影

参考色

风格

色相偏移 0°

预览

CSS 输出

直接可用的阴影变量

CSS彩色阴影生成器，创建多层彩色box-shadow效果，自定义偏移、模糊、扩展和颜色，实时预览效果，一键复制CSS代码，支持多层叠加。支持多层阴影叠加，每一层的偏移、模糊和颜色都能独立调整，预览区会实时叠加显示最终效果。

适合给卡片、按钮这类需要立体层次感的界面元素做阴影设计，彩色阴影比默认的黑色阴影更容易呼应品牌色。