阴影生成器
在浏览器里可视化调节 CSS box-shadow。每一层阴影都能单独设置水平和垂直偏移、模糊、扩散、颜色与透明度，多层叠加可以做出单层阴影很难表现的柔和、立体的层次感。内阴影、彩色发光和硬边偏移阴影都在同一个面板里完成，预览区可以切换浅色或深色背景，还能调整圆角，贴近真实组件的形状。最终输出可直接复制的 CSS，所有计算都在本地完成，设计内容不会离开浏览器。
- 逐层控制偏移、模糊、扩散、颜色和透明度，并实时预览效果
- 多层阴影叠加，做出柔和真实的立体感，而不是一层生硬的投影
- 内阴影、彩色发光、聚焦描边和硬边偏移阴影，都在同一组控件里完成
- 预览支持浅色和深色背景，圆角可调，贴近真实组件的形状
- 输出可直接复制的 CSS，全部在浏览器本地计算，作品不会上传
box-shadow: 0px 8px 24px -4px rgba(15, 23, 42, 0.18);
功能简介
把 box-shadow 的每个参数集中到一个面板，让你在真实背景上判断立体感，而不是在样式表里凭像素值猜测。调到满意之后，直接把 CSS 复制回项目。
- 01
逐层精细控制
每一层都有独立的偏移、模糊、扩散、颜色和透明度，让你精确控制阴影的方向和柔和程度，而不是只能微调一个固定预设。
- 02
多层叠加的真实立体感
叠加多层可以还原光线真实的衰减方式，一层紧贴的近处阴影加上一层弥散的环境阴影，做出单条声明无法达到的层次。
- 03
内阴影与发光共用一个面板
任意一层都能切换成内阴影，做出按压凹陷和输入框效果；把模糊和颜色向外扩展，又能得到聚焦描边和霓虹发光，无需切换工具。
- 04
浅色与深色背景预览
预览区可以切换浅色或深色背景，因为同一组阴影在米白和近黑背景上的观感差别很大，需要分别确认。
- 05
匹配的圆角与元素颜色
可调整预览元素的圆角和颜色，让阴影落在接近卡片、按钮或弹窗的形状上来判断，而不是套在一个无关的方块上。
- 06
精选起点预设
预设覆盖轻微悬浮、多层卡片、材质层级、聚焦描边、品牌发光和硬边偏移等风格，可以直接套用再做微调。
如何使用
在一个面板里从大致想法走到可上线的 CSS，无论是对照设计稿还原，还是从零开始勾勒层次都适用。
- 01
先选一个接近目标立体感的预设，或者从默认的单层阴影开始。
- 02
为第一层设置偏移、模糊和扩散，直到方向和柔和程度合适。
- 03
调整颜色和透明度，自然的阴影大多是深色加低透明度，而不是纯黑。
- 04
需要更丰富的层次就再加几层，或把某一层切换成内阴影，做出凹陷、按压和内边缘。
- 05
在浅色和深色背景上分别检查，配上匹配的圆角，确认无误后复制 CSS。
功能说明
阴影是界面表达悬浮、聚焦和分组的方式，需要在不同主题、不同组件以及设计与开发的交接之间都能稳定复现。
- 支持完整的 box-shadow 语法：偏移、模糊、扩散、颜色、透明度和 inset 关键字
- 多层叠加合并成一条声明，做出柔和分层的立体感，而不是一层生硬的投影
- 每层独立的透明度让阴影保持低透明度的彩色，比纯黑自然得多
- 内阴影模式覆盖按压按钮、输入框凹陷和内边缘，这些是外阴影无法表达的
- 把模糊加大后，彩色层可以变成聚焦描边、选中高亮以及品牌或霓虹发光
- 随机功能在方向定下来之后，能快速尝试新的立体感组合
- 预览可在浅色和深色背景之间切换，让对比度问题在上线前就暴露出来
- 可调的圆角和元素颜色，让阴影落在接近真实组件的形状上来判断
- 所有计算都在浏览器本地完成，未发布的产品界面和内部设计不会外泄
- 输出是干净的 CSS，可直接用于样式表、Tailwind 任意值、CSS 变量和组件库
适合哪些场景
阴影很少只是装饰，它在告诉用户什么浮在页面之上、什么被按了下去、什么正处于聚焦状态，而同一套方案需要在整个产品里复用。
-
卡片与面板
柔和的多层阴影把卡片和面板轻轻托离页面，既能分组内容，又不会像单条深色投影那样显得沉重。
-
按钮与交互态
常态、悬停、激活和按下共用一套阴影方案，让悬浮高度随交互一致地上升和回落。
-
弹窗、浮层与菜单
浮动层需要比内联卡片更宽、更柔的阴影，才能清晰地表达出它悬浮在页面所有内容之上。
-
输入框与按压控件
内阴影让输入框、开关和分段控件有可信的凹陷或按压手感，这是平面边框表达不出来的。
-
聚焦描边与可访问性
只设扩散的彩色阴影可以当作聚焦指示，并且会跟随圆角，在圆角元素上通常比 outline 描边更干净。
-
品牌发光与强调
一层彩色模糊阴影可以把注意力引向主操作或高亮项，又比实心彩色边框更克制。
-
深色模式的层次
阴影在深色背景上会变弱，在深色背景里检查方案，有助于在层次消失之前先把透明度调好。
-
设计系统与令牌
稳定的阴影方案沉淀成层级令牌或 CSS 变量，让各个界面共用同一套立体语言，而不是到处写一次性数值。
使用建议
阴影看起来是个随手的视觉选择，但只有把方向、透明度、主题和复用一起考虑，它才能在生产环境里稳得住。
- 用深色加低透明度，而不是纯黑。真实的阴影是半透明的，不是一团死墨。
- 保持界面里光线方向一致，通常是一个小幅向下的偏移，这样立体感才显得连贯。
- 两到三层能覆盖大多数层级，一层紧贴的近处阴影加一层弥散的环境阴影，比单一大模糊更自然。
- 深色模式里适当提高透明度，或借助偏亮的内高光，因为普通深色阴影在深色表面上几乎看不见。
- 圆角元素优先用只设扩散的彩色阴影，而不是 outline，这样聚焦描边会跟随圆角。
- 大面积或频繁重绘的表面避免使用过大的模糊值，重阴影会在滚动时增加绘制开销。
- 把最终方案沉淀成层级令牌或 CSS 变量，而不是把阴影字符串到处粘贴。
- 在设计系统里记录每一级层级，让立体感在设计稿和上线界面之间保持一致。
边界与注意事项
最终呈现取决于浏览器、显示器和周围的 CSS，标准化的语法并不保证完全一致的立体观感。
- 不同浏览器在模糊和合成阴影上略有差异，非常柔和或多层叠加的阴影可能看起来略有不同。
- 大面积或滚动表面上的大模糊和大扩散会增加绘制开销，在低端设备上尤其明显。
- 本工具聚焦 box-shadow，文字阴影、drop-shadow 滤镜和 SVG 阴影遵循不同的语法和行为。
- 为浅色表面调好的阴影，通常需要为深色模式单独再过一遍，而不是默认照搬。
- 如果项目强制使用令牌化样式，应把输出映射到批准的层级令牌，而不是粘贴字面 CSS 字符串。
- 透明或半透明元素上的阴影会和背景产生互动，预览背景只能近似还原这种情况。
- 立体感还取决于元素颜色和它背后的表面，重要场景请在真实布局里确认。
常见问题
围绕用法、分层、主题和实际限制，整理了在前端实现和设计协作中使用 box-shadow 时最常遇到的问题。
生成的 CSS 可以直接用于生产吗？
可以。输出是标准的 box-shadow 语法，能直接放进样式表、组件样式、Tailwind 任意值或 CSS 变量，无需改动。
为什么要叠加多层阴影？
真实的立体感来自不止一层阴影。一层紧贴、偏深的近处阴影加上一层更宽、更柔的环境阴影，比单一大模糊自然得多。
什么时候该用内阴影？
当阴影应该落在元素内部而不是周围时使用内阴影，比如输入框凹陷、按下的按钮和内边缘等凹陷表面。
怎么做出聚焦描边？
把偏移和模糊设为零，给这一层一个较小的正扩散和品牌色，它就会变成跟随圆角的描边，适合圆角元素。
阴影为什么在深色模式里消失了？
深色阴影在深色背景上对比很弱。在深色背景里预览并提高透明度，或加一道淡淡的内高光，立体感才能保留。
阴影颜色应该用纯黑吗？
很少需要。真实阴影是半透明的，深色加低透明度会和元素背后的内容融合，看起来比纯黑自然得多。
编辑过程中我的设计会被上传吗？
不会。预览和 CSS 生成都在浏览器本地完成，因此可以安全地用于未发布的产品界面和保密的设计工作。
它能配合 Tailwind 使用吗？
可以。输出能写进 shadow- 这类任意值语法，也可以放进 tailwind.config 的 boxShadow 或 theme 扩展里。
阴影会影响页面性能吗？
小阴影开销很低。大面积或滚动表面上的大模糊和大扩散会在低端设备上增加绘制开销，重阴影建议控制使用范围。
怎么让各个页面的层级保持一致？
把最终方案沉淀成层级令牌或 CSS 变量，在可复用组件里引用，而不是在多个文件里重复粘贴阴影字符串。
更多相关工具
阴影是为界面构建立体感和色彩的一环。把它和颜色转换、渐变设计搭配起来，从规范的颜色值出发，经过立体层次，落到一致、可上线的表面。