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

> 免费在线 CSS 阴影生成器：可视化调节 box-shadow 与 text-shadow，支持多层阴影、偏移、模糊、扩展、透明度和内阴影，内置 Material、新拟态等预设，输出 Tailwind 类名。

- 网址: https://qilingtools.com/zh/css-shadow
- 分类: 开发工具 (https://qilingtools.com/zh/dev)
- 标签: [设计配色](https://qilingtools.com/zh/tags/design), [开发](https://qilingtools.com/zh/tags/dev), [前端网页](https://qilingtools.com/zh/tags/frontend)
- 最后更新: 2026-10-26
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

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

## 使用步骤

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

## 功能特点

- box-shadow 与 text-shadow 两种模式
- 多层阴影：开关、复制、删除、调整顺序
- 偏移、模糊、扩展、颜色透明度、内阴影
- 预览可调背景色、元素色、圆角、大小与字号
- Material 各级、新拟态、长投影、霓虹等预设
- 输出 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 规则替换为下划线，复制即可使用。

## 相关工具

- [JSON 格式化](https://qilingtools.com/zh/json): 免费在线 JSON 格式化：一键美化、压缩，实时语法校验并定位到出错行列，支持树形视图折叠、键名排序、转义与去转义、Unicode 转中文、复制下载，数据不上传。
- [Base64 编解码](https://qilingtools.com/zh/base64): 免费在线 Base64 编码解码工具：支持中文 UTF-8、URL 安全变体，文本与 Base64 互转，实时转换，本地处理不上传。
- [URL 编解码](https://qilingtools.com/zh/url-encode): 免费在线 URL 编码解码工具：encodeURIComponent 与 encodeURI 两种模式，处理中文、空格与特殊符号，本地实时转换不上传。
- [JWT 解析](https://qilingtools.com/zh/jwt): 免费在线 JWT 解析工具：解码 JWT 的 Header 与 Payload，展示过期时间、签发时间等，本地解析不上传，保护令牌安全。
- [时间戳转换](https://qilingtools.com/zh/timestamp): 免费在线 Unix 时间戳转换工具：时间戳与日期互转，自动识别秒/毫秒，显示本地时间、UTC、ISO 8601 和相对时间，实时更新。
- [哈希计算](https://qilingtools.com/zh/hash): 免费在线哈希/摘要计算工具：对文本或文件计算 SHA-1、SHA-256、SHA-384、SHA-512，使用浏览器加密接口本地完成，文件不上传。
- [UUID 生成](https://qilingtools.com/zh/uuid): 免费在线 UUID 生成器：使用加密安全随机数批量生成符合 RFC 4122 的 UUID v4，可大写、去连字符、加花括号，一键复制。
- [进制转换](https://qilingtools.com/zh/base-convert): 免费在线进制转换工具：二进制、八进制、十进制、十六进制及任意 2–36 进制互转，支持大整数（BigInt），本地实时计算。