设计工具
颜色选择器
选择并提取 HEX、RGB、HSL 颜色值
设计工具
CSS 阴影生成器
可视化调节并复制 box-shadow 代码
工具面板
关于CSS 阴影生成器
水平/垂直偏移、模糊、扩展与颜色实时预览，可选内阴影。输出就是标准的 box-shadow 声明。
- 1
五个参数各管一件事：X / Y 偏移决定影子往哪边落，模糊半径（blur）把边缘晕开，扩散半径（spread）先把影子整体放大或缩小再模糊，颜色决定浓淡。
- 2
扩散可以为负：负值把影子收窄，适合做「贴着元素边缘」的细阴影；Y 为负时影子落在上方向。
- 3
颜色默认带透明度（#0f172a40 是 25% 不透明度），色板只改 RGB 部分、透明度保留原值——这样换色不会突然把影子变实。
- 1
拖四个滑块
先定偏移方向，再调模糊与扩散；数值实时显示在标签右侧。
- 2
调颜色与 inset
勾上 inset 会把阴影画在元素内部（做内凹与输入框底纹）；色板改 RGB，透明度保留。
- 3
复制 CSS
输出一行 `box-shadow`，粘进样式表即可。
模糊半径把边缘晕开（影子内外一起变软），扩散半径是先把影子的形状整体放大（正值）或缩小（负值）再模糊。想要「大而淡」用大 blur 配负 spread，想要「硬边」用小 blur 配正 spread。
本工具一次输出一条。CSS 本身支持逗号分隔多层：`box-shadow: a, b`，并且层序就是绘制顺序——先写的在上层。把两条拼起来就是常见的分层质感做法（近处一条紧、远处一条散）。