本地安全处理免费工具
CSS 阴影生成器
告别传统生硬的单层阴影。利用多层平滑指数衰减算法，即时可视化微调生成细腻、自然、高级的现代 CSS 软阴影与 Tailwind CSS 实用类代码。
多层平滑自然光晕实时预览
OU
平滑自然阴影3 层平滑衰减精选高颜值预设模板
阴影参数调配 纯前端实时合成
平滑层数 (Layers)3 层
1 层 (常规经典)6 层 (极致弥散)
垂直偏移 (Y)12px
水平偏移 (X)0px
模糊半径 (Blur)24px
扩散半径 (Spread)-2px
阴影基色
#0f172a
总透明度12%
阴影方向
box-shadow: 0px 2.3px 4.6px -0.4px rgba(15, 23, 42, 0.04), 0px 6.5px 13.1px -1.1px rgba(15, 23, 42, 0.04), 0px 12px 24px -2px rgba(15, 23, 42, 0.04);
shadow-[0px_2.3px_4.6px_-0.4px_rgba(15,23,42,0.04),0px_6.5px_13.1px_-1.1px_rgba(15,23,42,0.04),0px_12px_24px_-2px_rgba(15,23,42,0.04)]
现代 UI 设计阴影层级与推荐参数速查表
| 设计层级 | 典型应用场景 | 推荐层数与透明度 | 视觉感知 |
|---|---|---|---|
| 基础层 (Elevation 1) | 列表卡片、轻按钮、表格行悬浮 | 2 层 / 5%~8% 透明度 | 轻盈微浮，不抢焦点 |
| 中浮层 (Elevation 2) | 下拉菜单、气泡卡片、悬浮工具栏 | 3 层 / 10%~14% 透明度 | 明确悬浮感，层级分明 |
| 高浮层 (Elevation 3) | 模态弹窗 (Modal)、Toast 消息提示 | 4~5 层 / 15%~20% 透明度 | 强视觉隔离，居于顶层 |
| 光晕层 (Brand Glow) | 核心 CTA 购买按钮、发光霓虹徽章 | 3 层 / 主题色 30%~40% | 吸引点击，营造科技感 |
下表为常见现代前端组件设计层级规范参考。
使用指南
- 1选择一套精选预设模板（如极简微浮、立体浮层或品牌光晕）。
- 2微调平滑层数（1~6层）、偏移距离、模糊半径与总透明度。
- 3点击“复制 CSS”或“复制 Tailwind”，直接粘贴应用至你的网页组件中。
原理解析与标准规范
真实的物理阴影是由光源衍射形成的连续渐变。传统 CSS 仅写一层 box-shadow 往往边缘发黑生硬。现代高级 UI 设计（如 Stripe、Vercel、Apple）普遍采用“多层平滑阴影（Smooth Shadow）”技术：通过将总透明度分散到 2~6 层不同距离与模糊度的阴影中，使视觉边缘呈现自然的非线性衰减，营造出极富质感的层次感。
常见问题解答 (FAQ)
什么是多层平滑阴影（Smooth Shadow）？
多层阴影是将一个原本单一的 box-shadow 拆解为多个由近及远、模糊逐渐扩大、透明度平滑递减的阴影层。由于模拟了自然环境中的环境光漫反射，相比单层生硬的阴影，视觉上更加柔和、高级且不会弄脏背景。
导出的 Tailwind CSS 实用类代码如何使用？
工具生成的 Tailwind 代码采用标准 Arbitrary Value 语法（如 shadow-[0px_2px_4px_rgba(...)]），无需修改 tailwind.config.js，直接复制到 HTML 或 JSX 的 className 中即可即时生效。
内阴影（Inset）适合用在什么场景？
内阴影将光晕绘制在元素边框内侧，非常适合用来制作凹陷效果的输入框（Input）、卡片下压态、内嵌容器底栏或拟物风格开关。
推荐相关工具
随时在 Google 或百度搜索「OUCloud CSS 阴影生成器」，快速找回本工具