阴影样式生成器

阴影生成器用滑块调节一个 CSS 盒子阴影(box-shadow)的各项参数,上方的白色卡片会实时显示效果,下方给出可以直接复制的 CSS 代码。适合给按钮、卡片、弹窗这类元素快速试出合适的阴影,不用反复改代码再刷新页面。它生成的是单层阴影,不支持多层叠加,也不生成文字阴影(text-shadow)或图片阴影(filter: drop-shadow)。

操作步骤

1. 先看顶部的预览区:页面背景色上有一张白色圆角卡片,阴影就加在这张卡片上。
2. 拖动四个滑块:「水平偏移」「垂直偏移」「扩散大小」的范围都是 -50 到 50 像素,「模糊半径」的范围是 0 到 100 像素。标签后面会实时显示当前数值。
3. 用「阴影颜色」取色器选择阴影的颜色,默认是黑色 #000000。再用「透明度」滑块(0% 到 100%,默认 20%)调整浓淡。
4. 如果想要向内凹陷的效果,勾选「内阴影(向内凹陷效果)」。
5. 在页面底部的「CSS 代码」框里查看结果,点击右上角的「复制」(成功后显示「已复制」),然后粘贴进你的样式表。

每个参数是什么意思

box-shadow 的写法是:偏移X 偏移Y 模糊半径 扩散半径 颜色。水平偏移为正,阴影向右移,为负则向左;垂直偏移为正,阴影向下移,为负则向上。模糊半径越大,边缘越柔和、越散;为 0 时是一圈边缘锐利的硬阴影。扩散大小为正会让阴影整体比元素更大,为负会让阴影比元素更小,常用负扩散配合较大的模糊来做出「只在底部有一点阴影」的效果。颜色加上透明度之后,工具会把十六进制颜色转成 rgba 写法。例如,下面是用工具同样的转换逻辑实际算出来的结果:默认设置(0、8、20、0,黑色,透明度 20%)得到 box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.20);。再如颜色 #1F2A44、透明度 35%、勾选内阴影、偏移 0 和 2、模糊 6、扩散 -1,会得到 box-shadow: inset 0px 2px 6px -1px rgba(31, 42, 68, 0.35);。

支持范围与已知限制

• 只有一层阴影。设计里常见的多层叠加阴影(柔和的环境阴影加一层较实的接触阴影)需要你自己把多条 box-shadow 值用逗号拼起来。
• 单位固定是 px,没有 em、rem 或百分比;参数为 0 时也会写成 0px。
• 颜色只能用取色器选择,透明度单独设置;最终输出总是 rgba 格式,不会输出十六进制或 hsla 写法。
• 预览用的是一张固定的 160×100 白色圆角卡片,放在页面的背景色上。这不代表你的真实元素或页面背景;在深色背景或彩色背景下,同样的阴影看上去会不一样,最终请在你的真实页面里检查。
• 滑块范围有限(偏移与扩散 ±50,模糊 100)。如果需要更夸张的阴影,可以复制代码后手动修改数值。
• 内阴影只是在输出里加上 inset 关键词,预览卡片是白色的,所以内阴影的效果相对不明显,可以把偏移调大一些观察。
• 页面不保存你的设置,刷新后恢复默认值。

常见问题:阴影看起来太重或者太脏怎么办?

最常见的原因是透明度太高或颜色太黑。可以把透明度降到 10% 到 20% 左右,并增加模糊半径。想让阴影更自然,可以用偏淡的深蓝或深灰色代替纯黑;这只是设计经验,具体效果取决于你的页面。

常见问题:怎么做只有底部有阴影的效果?

把垂直偏移调为正数,水平偏移保持 0,再把扩散大小设为负数(比如 -5 到 -10),这样阴影会收窄到元素内部,只在底边露出来。你可以在预览里直接拖动滑块观察。

常见问题:阴影会影响页面布局或性能吗?

box-shadow 不占据布局空间,不会推开周围的元素。但是较大的模糊半径,尤其是用在很多元素或需要动画的元素上,会增加浏览器的绘制成本。如果页面卡顿,可以减小模糊半径或减少带阴影的元素。

常见问题:复制的代码能直接用在什么地方?

复制出来的是完整的一行 CSS 声明,比如 box-shadow: ...;,可以粘贴进 CSS 文件、style 标签或行内样式。在 React 的行内样式对象里,需要改写为 boxShadow: "..." 的形式,只需要引号里面的值。

隐私与处理方式

所有计算都在你的浏览器里完成:十六进制颜色被转换成 rgba,拼接成 CSS 字符串。不会发送任何网络请求,也不会上传或保存你的设置。点击复制只是把这行文字写入剪贴板。