box-shadow 的四个数值分别是什么意思？

依次是水平偏移 X、垂直偏移 Y、模糊半径和扩展半径。X、Y 为正时阴影向右下方偏移；模糊越大边缘越柔和；扩展为正时阴影整体放大、为负时缩小，常用负扩展配合大模糊做出只在底部的柔和阴影。加上 inset 关键字则变成内阴影。

新拟态（Neumorphism）阴影怎么做？

新拟态要求背景和元素颜色相同，再叠加两层方向相反的阴影：右下方一层比底色深的阴影、左上方一层比底色浅（通常是白色）的阴影，就会有从背景中凸起的效果；两层都改成 inset 则变成凹陷效果。直接点“新拟态凸起/凹陷”预设即可，再按需要修改背景色和阴影颜色。

多层阴影的顺序有影响吗？

有。CSS 中写在前面的阴影绘制在最上层，列表里越靠上的图层就越靠前。一般把小而清晰的阴影放在上面、大而柔和的阴影放在下面；长投影、立体字这类效果由很多层逐像素偏移的阴影叠加而成。

怎么在 Tailwind CSS 中使用生成的阴影？

box-shadow 可直接使用输出的 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),...] 类名；text-shadow 输出为任意属性写法 [text-shadow:...]，Tailwind v3 和 v4 都支持。空格已按 Tailwind 规则替换为下划线，复制即可使用。

🌓

🌓CSS 阴影生成器 - box-shadow / text-shadow 多层阴影在线调试与预设

好看的阴影往往由多层叠加而成：一层柔和的大范围扩散加一层贴近元素的小阴影，才能显得自然。这个工具让你像在设计软件里一样调阴影：每一层都可以单独设置水平/垂直偏移、模糊半径、扩展半径、颜色与不透明度，以及是否为内阴影（inset），图层可以开关、复制、删除和调整上下顺序。预览区可以更换背景色、元素颜色、圆角和元素大小，看阴影在真实配色下的效果；切换到 text-shadow 模式可以输入自己的文字、调整字号和文字颜色，做描边、立体字和霓虹发光效果。预设覆盖常用场景：柔和卡片阴影、分层平滑阴影、Material Design 1dp～24dp 各级高度、新拟态凸起与凹陷、长投影、硬边偏移（新粗野主义风格）、外发光与内发光，以及文字的霓虹、立体、描边、复古双色等。结果输出为标准 CSS，以及 Tailwind 的 shadow-[...] 和 [text-shadow:...] 任意值类名。

免费 · 无需注册 · 浏览器本地处理最后更新：2026-10-26

正在加载工具...

如何使用CSS 阴影生成器

1选择 box-shadow 或 text-shadow，或点一个预设
2添加或选中图层，拖动滑块调整偏移、模糊、扩展、颜色和透明度
3调整预览背景和元素样式，满意后复制 CSS 或 Tailwind 代码

常见问题

box-shadow 的四个数值分别是什么意思？: 依次是水平偏移 X、垂直偏移 Y、模糊半径和扩展半径。X、Y 为正时阴影向右下方偏移；模糊越大边缘越柔和；扩展为正时阴影整体放大、为负时缩小，常用负扩展配合大模糊做出只在底部的柔和阴影。加上 inset 关键字则变成内阴影。
新拟态（Neumorphism）阴影怎么做？: 新拟态要求背景和元素颜色相同，再叠加两层方向相反的阴影：右下方一层比底色深的阴影、左上方一层比底色浅（通常是白色）的阴影，就会有从背景中凸起的效果；两层都改成 inset 则变成凹陷效果。直接点“新拟态凸起/凹陷”预设即可，再按需要修改背景色和阴影颜色。
多层阴影的顺序有影响吗？: 有。CSS 中写在前面的阴影绘制在最上层，列表里越靠上的图层就越靠前。一般把小而清晰的阴影放在上面、大而柔和的阴影放在下面；长投影、立体字这类效果由很多层逐像素偏移的阴影叠加而成。
怎么在 Tailwind CSS 中使用生成的阴影？: box-shadow 可直接使用输出的 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),...] 类名；text-shadow 输出为任意属性写法 [text-shadow:...]，Tailwind v3 和 v4 都支持。空格已按 Tailwind 规则替换为下划线，复制即可使用。