常见网页阴影都离不开偏移、模糊和透明度这几个变量，工具页可以直接把它们串起来调。
阴影生成
box-shadow 生成器
在线生成卡片、按钮和浮层常用的 CSS `box-shadow`，支持偏移、模糊、扩散、透明度和 inset，适合网页 UI 落地。
实时预览卡片阴影输出 CSS 和 Tailwind 类支持 inset 和透明度
直接调阴影层级
这个页面优先解决浮起感、卡片层级和输入框内阴影，不需要手写数值反复试。
适合卡片阴影、按钮 hover、输入框内阴影和轻量浮层层级调试。
阴影预览
实时查看浮起感和层级变化
Outset · 0px 14px / blur 34px / spread -12px
Elevated Card#1F2937
0pxX 偏移
14pxY 偏移
34px模糊半径
0.16透明度
CSS 声明
box-shadow: 0px 14px 34px -12px rgba(31, 41, 55, 0.16);
Tailwind 任意值
shadow-[0px_14px_34px_-12px_rgba(31,_41,_55,_0.16)]
大多数情况下先决定浮起强度，再去微调阴影颜色和透明度，会比反复改十六进制更稳。
阴影确定后，通常还要继续搭配品牌色板、按钮主色和对比度规则一起验证。
为什么阴影不能只靠感觉
阴影既影响层级，也影响页面质感。只靠感觉试数值，很容易在卡片、弹层和按钮之间出现风格漂移。
- 偏移和模糊过重时，页面会显得浮而不稳；过轻时，又会失去层级。
- 同一个页面里卡片阴影、弹层阴影和 focus ring 最好有不同职责，而不是全都一个值。
- 如果项目在用 Tailwind 或 token，阴影也应该像颜色一样沉淀成稳定片段。
常见预设方向
下面这组预设更适合当作起点，再根据页面密度和品牌风格微调。
- 卡片阴影：适合内容卡片、文章模块和轻微浮起的工具面板。
- 悬浮面板：适合弹层、下拉菜单和更明显的层级浮起。
- 聚焦强调：适合按钮 hover、选中卡片或可点击模块的柔和聚焦。
- 内嵌层级：适合输入框、浅色面板和需要轻微压低层级的表面效果。
实际演示
示例输入输出
示例覆盖卡片浮起和 inset 输入框两类常见阴影方向，适合快速对照 CSS 与 Tailwind 输出。
示例 1
卡片浮起阴影
适合文章卡片、专题列表和工具面板的柔和浮起层级。
输入
阴影颜色
#1F2937
阴影参数
x 0px / y 14px / blur 34px / spread -12px / opacity 0.16
输出
CSS 输出
box-shadow: 0px 14px 34px -12px rgba(31, 41, 55, 0.16);
Tailwind 类
shadow-[0px_14px_34px_-12px_rgba(31,_41,_55,_0.16)]
示例 2
输入框内阴影
适合浅色输入框、筛选器和局部凹陷层级的轻量内阴影。
输入
阴影颜色
#1F2937
阴影参数
x 0px / y 1px / blur 0px / spread 0px / opacity 0.12
输出
CSS 输出
box-shadow: inset 0px 1px 0px 0px rgba(31, 41, 55, 0.12);
Tailwind 类
shadow-[inset_0px_1px_0px_0px_rgba(31,_41,_55,_0.12)]
规则说明
box-shadow 生成器的重点是把偏移、模糊、扩散、透明度和 inset 一起调，而不是只盯一个颜色值。
- 外阴影更适合卡片、浮层和按钮 hover，内阴影更适合输入框和浅表面。
- 偏移控制方向感，模糊控制柔和度，扩散决定阴影往外或往里压多远。
- 输出的 CSS 和 Tailwind 任意值可以直接复制到组件样式里做第一轮落地。
常见误区
阴影最容易出问题的不是参数太少，而是同一套参数被所有组件共用，最后页面层级失真。
- 弹层、卡片、focus ring 和输入框不应该共用完全同一个阴影值。
- 把颜色做得太黑、透明度太高，页面会显得脏且压迫。
- 如果品牌本身偏暖或偏冷，阴影颜色也可以轻微跟着走，但不宜太饱和。
结果解释
结果区同时给出预览卡片、CSS 值和 Tailwind 类，更适合快速判断是方向不对，还是强度不对。
- 如果卡片像漂起来一样，通常是偏移或模糊过大。
- 如果阴影几乎看不见，先看透明度和 spread，再决定是否换颜色。
- Tailwind 类更适合临时验证，稳定后建议再沉淀为 token。
推荐处理链路
阴影通常不会单独存在，后面还要继续和品牌色板、按钮颜色和可读性一起落地。
- 先把阴影层级定下来，再回头做按钮主色和 hover 层级，会更容易建立统一风格。
- 如果阴影落在有文字的卡片上，还要继续检查背景和正文对比度。
常见问题
常见问题
box-shadow 生成器常见问题主要集中在偏移、模糊、扩散和透明度怎么配合，才能得到稳定的网页层级。
阴影越大就代表层级越高级吗？
不一定。阴影大小只是层级感的一部分，偏移、模糊和透明度要一起看。阴影过重反而会让页面显得飘和脏。
什么时候更适合用 inset 内阴影？
输入框、筛选器、轻量凹陷面板和需要压低层级的表面，更适合用 inset。卡片、浮层和按钮 hover 一般更常用外阴影。
box-shadow 颜色一定要和主色一致吗？
通常不需要。多数情况下阴影更适合用偏中性、偏深的颜色，再用低透明度控制存在感；主色更多用于 focus ring 或特殊强调。
继续了解
相关工具
你还可以继续使用其他已经可用的颜色转换和配色工具。