CSS 阴影生成器
新构建多层 CSS box-shadow，含预设与实时预览。一键复制 CSS、属性值或 React 样式。
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
可视化构建 CSS 阴影 — 告别反复试错
这款免费 CSS box-shadow 生成器将代码编辑器里繁琐的猜测过程，变成直观的可视化操作。拖动偏移、模糊、扩展和透明度的滑块，预览区域实时更新阴影效果，底部即时生成可复制的 CSS 代码，支持多种输出格式。所有运算完全在本地浏览器中执行，无数据上传，无需注册账号。
从八款内置预设或空白图层开始，叠加多个阴影层次打造真实的景深效果，切换深色/浅色背景检查对比度，再选择你需要的输出格式：完整 CSS 属性声明、纯阴影值或 React 内联样式字符串。无论是微妙的卡片浮层、新拟态凸起还是霓虹发光效果，这款工具都能轻松搞定。
box-shadow 的六个参数详解
X 轴和 Y 轴偏移决定阴影相对于元素的位置 —— 正值 X 向右，正值 Y 向下，负值则分别向左或向上，适用于顶光阴影效果。模糊半径控制边缘的柔和程度：零值产生硬朗清晰的轮廓，较大值形成自然渐变的扩散效果，读起来有真实的景深感。扩展半径在应用模糊之前放大或收缩阴影 —— 负扩展配合大模糊可将阴影控制在元素的自然轮廓内，这是大多数真实感卡片阴影的核心技巧。
颜色通常使用半透明深色，如 `rgba(0, 0, 0, 0.12)` 表示中性浮层，或使用鲜艳色调制作发光效果。透明度滑块可以独立调节 Alpha 通道，无需更改颜色选择器。内阴影开关将阴影方向反转，绘制在边框盒内部，用于制作凹陷容器、嵌入式输入框和按下状态 —— 这是 `filter: drop-shadow()` 无法实现的功能。
多层叠加阴影 — 专业级真实景深效果
单一的大阴影看起来很生硬，像是 Photoshop 里随意套用的投影滤镜，而非真实光线。专业 UI 设计通常使用三到五层叠加阴影，每层偏移和模糊大约翻倍，而透明度减半。这种技术模拟了光线从光源向外物理散射的方式，在任何尺寸或观看距离下都显得自然。
本生成器支持最多八个独立图层，每层均可单独调整偏移、模糊、扩展、颜色、透明度和内阴影开关。每个图层的眼睛图标可切换可见性，方便即时对比前后效果而无需删除图层。深度预设展示了三层渐进叠加；悬浮使用两个互补图层营造元素脱离页面的感觉；Material预设还原了 Google Material Design 的多层浮层规范。
预设一览：卡片、硬边、新拟态、发光等
柔和卡片预设产生极其细腻的浮层效果 —— 足以让白色卡片从页面背景中脱离，又不会抢夺内容的注意力。硬边预设零模糊，边缘清晰，深受野兽派和复古设计风格青睐。Material预设还原了 Google Material Design 的多层阴影规范，适合具有 Android 风格景深系统的应用。
新拟态将左上方的高光与右下方的深色阴影结合，使元素看起来从匹配的背景表面凸起。蓝色发光演示如何用零偏移的彩色阴影打造发光按钮或主视觉装饰 —— 更改颜色即可匹配你的品牌色。内嵌容器展示了用于文本输入框和按下状态等凹陷 UI 元素的内阴影技巧。加载任意预设后，可随时拖动滑块微调至符合设计需求的效果。
box-shadow 对比 filter: drop-shadow 对比 Figma 阴影 — 如何选择？
box-shadow 作用于元素的矩形边框盒。filter: drop-shadow() 则沿元素的 Alpha 通道轮廓描绘阴影 —— 适用于透明 PNG 和 SVG 裁剪形状，但不支持内阴影、扩展半径和多层叠加。对于所有标准 UI 元素（卡片、按钮、弹窗、面板），`box-shadow` 才是正确的选择。
Figma 和 Adobe XD 都提供阴影设计面板，但输出的是设计工具专用数值 —— 通常需要手动转换才能用于 CSS。本生成器直接输出可用于生产的合法 CSS，省去转换步骤。与 Figma 有限的免费版或 Adobe XD 的订阅模式不同，UtiloKit 完全免费，无需安装即可在任何浏览器中运行，并支持多种输出格式（CSS、纯值、React），无需设计工具账号。
性能、隐私与三种复制格式
静态 `box-shadow` 只需绘制一次并以低成本合成 —— 对大多数 UI 来说没有性能顾虑。但直接对其进行动画处理会在每一帧触发重绘。高效替代方案：为元素添加 `::after` 伪元素并预先应用目标阴影，然后对该元素使用 `transition: opacity`。GPU 合成透明度无需重绘阴影，实现零重绘成本的流畅动画。
调好阴影后，选择适合项目的格式复制：CSS 属性用于样式表，纯值用于 CSS 变量或 SCSS 映射，React 内联样式用于 JSX `style` 属性和 Styled Components。你的配置不会保存到任何服务器或发送到任何地方 —— 关闭标签页即消失。收藏页面，随时回来迭代阴影设计。
支持桌面端、iPhone、Android 及所有现代浏览器
box-shadow 生成器完全响应式，适配任何配备现代浏览器的设备。桌面端呈现三栏布局：左侧图层列表、中间实时预览、右侧生成代码。在 iPhone 和 Android 上，布局折叠为纵向单列，滑块和颜色选择器针对触控进行优化，颜色选择器会调用系统原生拾色器。
所有复制按钮使用 Web Clipboard API，支持 Safari 13.1+、Chrome 66+、Firefox 90+ 和 Edge 79+，移动端现代浏览器无需任何兼容处理即可正常复制。无需下载应用，无需注册账号，无速率限制。在任意设备上打开网址，立即开始设计。
Frequently asked questions
CSS box-shadow 是什么，有什么用？
CSS `box-shadow` 属性可为 HTML 元素添加一个或多个阴影效果。每个阴影最多由六个值定义：可选的 `inset` 关键字、水平偏移、垂直偏移、模糊半径、扩展半径和颜色。水平偏移正值向右，垂直偏移正值向下。多个阴影用逗号分隔，按从前到后的顺序渲染。这是 CSS 中为 UI 组件添加视觉层次、浮层效果、发光效果和新拟态风格的主要机制，无需任何图片资源。
CSS box-shadow 的正确语法是什么？
完整语法为：`box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`。只有 `offset-x`、`offset-y` 和 `color` 是必填项；`blur-radius` 和 `spread-radius` 省略时默认为 0，`inset` 省略时默认为外阴影。典型的卡片阴影写法：`box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`。用逗号分隔可叠加无限个阴影，按从前到后的顺序渲染（第一个在最上层）。本生成器输出包含 `box-shadow:` 属性名的完整声明，也可选择只输出纯值。
模糊半径和扩展半径有什么区别？
模糊半径控制边缘的柔和程度：零值产生与元素形状完全一致的硬朗清晰边缘；较大值形成逐渐柔化、更加扩散的渐变效果。扩展半径在应用模糊之前放大或收缩整个阴影：正值使阴影超出元素边界向外扩展，负值则向内收缩。视觉上最真实的阴影通常使用适中的模糊配合略微为负的扩展，使阴影贴近元素的自然轮廓，而不会过度扩散。这正是"深度"和"悬浮"预设所采用的技术。
如何在 CSS 中创建内阴影（inset）？
在阴影声明的开头添加 `inset` 关键字即可：`box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`。内阴影绘制在元素的边框盒内部而非其后方，呈现出凹陷或按压的视觉效果。常见用途包括：输入框（显示焦点深度）、开关按钮的轨道、按钮的激活状态以及浮雕文字容器。本生成器在每个图层的控制面板中提供内阴影开关 —— 开启后预览元素的阴影会立即翻转至内部。
一个元素可以叠加多个 box-shadow 吗？
可以 —— CSS 允许在单个元素上使用任意数量的逗号分隔阴影。它们按列出顺序渲染，第一个阴影在最上层。叠加多层是实现平滑、真实景深效果的核心技巧 —— 单个大阴影看起来很假，而三到五个渐进图层可以模拟光线在物理上的散射方式。本生成器支持最多八个独立图层，每层均有独立的偏移、模糊、扩展、颜色、透明度和内阴影开关。眼睛图标可显示/隐藏单个图层，方便即时对比前后效果而无需删除。
如何制作新拟态（Neumorphism）阴影效果？
新拟态在背景色与页面匹配的元素上使用两个相对的阴影：一个明亮（接近白色）的阴影指向左上方，一个深色（低透明度黑色）的阴影指向右下方。这让元素看起来像是从背景表面凸起。经典的新拟态声明：`box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`。元素的背景色必须与页面背景完全一致，这种视觉效果才能成立。本生成器的"新拟态"预设提供了一个现成的起点 —— 将预览背景切换为"柔和灰"可查看其实际效果。
如何制作发光的 box-shadow 效果？
使用零偏移、大模糊半径和彩色值即可：`box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`。零偏移使发光向四周均匀扩散。正扩展值可将发光范围进一步推离元素。叠加两层 —— 一层模糊小、透明度高，形成明亮的发光核心；另一层模糊大、透明度低，形成环境光晕 —— 可产生更逼真的发光效果。"蓝色发光"预设正是采用这种双层方案演示的。将颜色更改为任意色调，即可制作自定义强调色发光效果。
如何制作平滑、真实的多层阴影？
不要使用单一大阴影，而是叠加三到五层，每层偏移和模糊大约翻倍，透明度减半。例如：`0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`。这种技术模拟了光线从点光源向外物理散射的方式，在任何缩放级别或显示分辨率下都效果出众。本生成器中的"深度"和"悬浮"预设正是基于这一原理 —— 三个渐进图层，在任何比例下都显得自然。
box-shadow 和 filter: drop-shadow() 有什么区别？
`box-shadow` 始终作用于元素的矩形边框盒，无论元素在视觉上呈现为何种形状。`filter: drop-shadow()` 则追踪元素的实际 Alpha 通道轮廓 —— 适用于需要阴影跟随形状而非其边界矩形的透明 PNG 裁剪图或 SVG 图标。对于标准 UI 组件（卡片、按钮、面板、对话框），`box-shadow` 才是正确选择：它的绘制速度更快，支持内阴影模式、扩展半径，并允许多个叠加图层。只有当元素的透明背景对阴影形状有影响时，才使用 `filter: drop-shadow()`。
box-shadow 会影响 CSS 布局或点击区域吗？
不会。`box-shadow` 纯粹是一种视觉效果，在正常布局流之外渲染。它不会推动相邻元素，不会增加可滚动内容区域，也不影响元素的计算宽度、高度、外边距或内边距。阴影在视觉上超出了元素的边框范围，但布局引擎会完全忽略它。这意味着你可以在紧凑排列的网格中为元素添加大阴影而不破坏布局 —— 不过可能需要在父容器上设置 `overflow: visible` 以确保阴影不被裁剪。
如何复制 React 或 Tailwind 格式的生成 CSS？
完成阴影设计后，生成器提供三种输出格式。<strong>复制 CSS</strong> 给出完整的属性声明（`box-shadow: …;`），可直接用于任何样式表。<strong>复制纯值</strong> 仅给出阴影值 —— 适用于 SCSS 变量、CSS 自定义属性值或 Tailwind `extend.boxShadow` 条目。<strong>React 样式</strong> 输出驼峰命名格式（`boxShadow: '…'`），用于 JSX 内联 style 对象或 Styled Components。对于 Tailwind，将纯值粘贴到 `tailwind.config.js` 的 `theme.extend.boxShadow` 下，即可创建自定义阴影工具类。
这个 box-shadow 生成器比 cssgenerator.org 或 css-box-shadow.com 更好吗？
大多数专用 box-shadow 工具只支持单层生成 —— 例如 cssgenerator.org 提供基础控件，但没有预设库，也不支持多层叠加。css-tricks.com 的内容是参考文档，并非交互工具。cssmatic.com 的 CSS 生成器虽然可用，但界面过时且广告较多。UtiloKit 生成器支持最多八个独立图层并提供逐层可见性开关，内置八款精心设计的预设（覆盖最常见的阴影设计模式：卡片、硬边、Material、新拟态、悬浮、深度、发光、内嵌容器），支持三种适用于不同框架的输出格式，以及深色/浅色背景切换用于对比度检查 —— 全程无广告，零数据上传。
这个工具在手机上可以使用吗 —— iPhone 和 Android？
可以 —— box-shadow 生成器完全响应式。在 iPhone 和 Android 上，所有滑块均支持触控操作，拖动手柄大小适中。实时预览元素会自动缩放适配手机屏幕。颜色选择器在移动端浏览器上会调用系统原生拾色器。桌面端三栏布局在窄屏上折叠为清晰的单列纵向布局。所有复制按钮使用 Web Clipboard API，iOS 和 Android 上的 Safari、Chrome 和 Firefox 均已支持。无需下载应用，无需注册账号 —— 打开网址即可开始使用。
