CSS Box Shadow 生成器
可叠加任意数量的阴影图层，调整每层的偏移、模糊、扩散、颜色与 inset，实时预览即时更新。6 个预设（Soft、Medium、Large、Neumorphism、Inset、Glow）一键启用常见效果。输出可复制为 CSS 规则或 Tailwind 任意值类。
—
预设
阴影图层
预览
CSS
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.15), 0px 2px 6px -2px rgba(0, 0, 0, 0.08);
Tailwind
shadow-[0px_8px_24px_-4px_rgba(0,_0,_0,_0.15),_0px_2px_6px_-2px_rgba(0,_0,_0,_0.08)]
使用方法
- 选预设或从零开始。
- 调节每层的偏移、模糊、扩散和颜色。
- 需要内阴影时开启 Inset。
- 复制 CSS 规则或 Tailwind 类。
常见问题
- Blur 与 Spread 区别？
- Blur 让阴影边缘柔化——渐变到透明的距离。Spread 在模糊前放大或缩小阴影形状本身（负值则内缩）。
- 什么时候用多图层？
- 自然阴影通常需要两层以上：近处深色一层 + 远处浅色一层。Material Design 与 Tailwind 默认阴影都是多层。
- 为什么用 rgba() 而非 HEX？
- 半透明色让背景透出，阴影更自然。rgba() 可直接设置 Alpha。
- 为什么 Tailwind 类里有下划线？
- Tailwind 以空白分割类名，所以任意值用下划线代替空格。
相关工具
CSS 文字阴影生成器（多图层）
随意叠加多层 text-shadow — 霓虹发光、3D、描边、长阴影 — 实时预览，CSS 可直接复制。
颜色 0 0
CSS 渐变生成器
用多色停靠点设计线性或径向 CSS 渐变并复制代码。
颜色 0 0
CSS 滤镜演练场
可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。
颜色 0 0
颜色令牌导出器
定义一次颜色调色板，导出到 CSS 自定义属性、Tailwind 配置、SCSS、LESS、设计令牌 JSON、SwiftUI Color 或 Android `colors.xml`。实时预览色样。
颜色 0 0
颜色名称查找
为任意 hex/RGB 颜色查找最接近的 CSS、Tailwind 或 XKCD 调查色名 — 按 OKLab 空间感知距离排序。
颜色 0 0
HSL 颜色选择器
拖动色相、饱和度、亮度、alpha 滑块选色 — 复制 HEX、RGB、HSL 或 Tailwind 任意值。
颜色 0 0