CSS盒阴影生成器

免费在线CSS盒阴影生成器，支持实时预览。可叠加多层阴影、从精选预设中选择、切换内阴影模式，并立即复制生产就绪的代码。所有处理均在您的浏览器中完成。

CSS盒阴影生成器

快速示例:

实时预览

↕ 拖拽以设置偏移

阴影图层

图层设置

X 偏移 px

Y 偏移 px

模糊 px

扩散 px

颜色

透明度 %

内阴影

精选预设

生成的 CSS

Embed CSS盒阴影生成器 Widget

CSS盒阴影生成器

CSS盒阴影生成器让您可以可视化设计 box-shadow 效果并即时复制生产就绪的 CSS 代码。您可以堆叠多个阴影图层，从受 Material Design、Tailwind CSS 和新拟态 (Neumorphism) 启发的精选预设中进行选择，或者直接在预览上拖拽来调整阴影位置。所有操作都在您的浏览器中运行——您的代码永远不会离开当前页面。

如何使用 CSS盒阴影生成器

调整阴影控件 — 使用滑块设置水平偏移 (X)、垂直偏移 (Y)、模糊半径和扩散半径。您也可以直接在预览区域拖拽以直观地重新定位阴影。
选择颜色和透明度 — 使用颜色选择器选取阴影颜色，并通过透明度滑块微调透明度。预览将实时更新。
添加多个图层或预设 — 点击+ 添加阴影图层来堆叠阴影以获得真实的深度感。或者选择一个精选预设（Material、Tailwind、新拟态等），从经过验证的设计开始。
复制 CSS — 点击复制获取生成的 box-shadow 代码，并直接粘贴到您的样式表中。

了解 box-shadow 语法

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y (偏移)

阴影的水平和垂直位移。正值向右/向下移动；负值向左/向上移动。

blur-radius (模糊半径)

控制阴影的模糊程度。0 会产生锐利的边缘；值越高，阴影越柔和、越扩散。

spread-radius (扩散半径)

扩大或缩小阴影。正值使阴影变大；负值使其缩小，适用于元素下方的微妙效果。

inset (内阴影)

存在时，阴影将绘制在元素内部。常用于按下按钮的效果和凹陷的输入框字段。

专业盒阴影设计技巧

层叠多个阴影 — 现实世界的物体投射的是复杂的阴影。使用 2-3 层阴影（一层柔和的环境层 + 一层锐利的主光源层）比单层阴影产生的结果要真实得多。
使用低透明度 — 透明度在 8-20% 之间的阴影看起来最自然。避免使用高透明度的纯黑阴影，因为它们看起来生硬且过时。
统一光照方向 — 在整个 UI 中保持阴影偏移的一致性，以模拟单一光源。不一致的阴影会破坏视觉错觉。
彩色阴影 — 尝试使用元素背景颜色的深色调，而不是纯黑色，以获得更和谐、现代的外观。
负扩散值 — 负扩散值会使阴影比元素本身更小，从而创建一种微妙的接触阴影，使元素在没有明显边缘的情况下显得更稳固。

流行阴影样式解析

Material Design 高度 (Elevation) — 使用两个阴影层：一个较柔和的环境阴影和一个较锐利的关键阴影。不同的高度级别 (1-5) 会逐渐增加偏移和模糊。
Tailwind CSS 工具类 — Tailwind 提供了 shadow, shadow-md, shadow-lg, shadow-xl 和 shadow-2xl 类，每一个都使用了针对常见卡片和模态框场景优化的双层阴影。
新拟态 (Neumorphism) — 使用两个相反方向的阴影（一亮一暗）来创建柔和的挤压塑料效果。在浅灰色背景上效果最佳，因为此时两个阴影都清晰可见。
玻璃拟态 (Glassmorphism) — 将微妙的阴影与背景模糊 (backdrop-filter blur) 和半透明背景结合使用。阴影在磨砂玻璃效果下方增加了深度。

常见问题解答

什么是 CSS box-shadow 属性？

CSS box-shadow 属性用于在元素的框架周围添加阴影效果。它接受水平偏移、垂直偏移、模糊半径、扩散半径和颜色等值。多个阴影可以用逗号分隔，以创建分层的深度效果。

如何在 CSS 中创建多个盒阴影？

通过用逗号分隔每个阴影定义来创建多个盒阴影。例如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1)。每个阴影都渲染在前一个阴影之上，第一个阴影显示在最顶层。

box-shadow 和 drop-shadow 有什么区别？

box-shadow 将阴影应用于元素的矩形框，而 filter: drop-shadow() 则遵循包括透明区域在内的实际形状。box-shadow 支持扩散半径和内阴影模式，而 drop-shadow 则不支持。对于标准的矩形元素，box-shadow 更常用且性能更好。

什么是内阴影 (inset box shadow)？

内阴影出现在元素内部而不是外部。它是通过在阴影值前添加 inset 关键字创建的。内阴影常用于按钮按下效果、输入框样式以及创建凹陷或雕刻外观。

微妙的卡片效果有哪些推荐的 box-shadow 值？

一种流行的微妙卡片阴影使用两个图层：0 1px 3px rgba(0,0,0,0.12) 用于近处阴影，0 1px 2px rgba(0,0,0,0.24) 用于勾勒轮廓。Tailwind CSS 为其默认阴影工具使用 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)。

引用此内容、页面或工具为：

"CSS盒阴影生成器" 于 https://MiniWebtool.com/zh-cn/css盒阴影生成器/，来自 MiniWebtool，https://MiniWebtool.com/

由 miniwebtool 团队开发。更新日期：2026-03-07

开发者 API 可用: 用一次 JSON HTTP 请求，把这个工具接入你的应用、自动化流程或智能体。查看 API 文档

CSS盒阴影生成器

CSS盒阴影生成器

如何使用 CSS盒阴影生成器

了解 box-shadow 语法

专业盒阴影设计技巧

流行阴影样式解析

常见问题解答

什么是 CSS box-shadow 属性？

如何在 CSS 中创建多个盒阴影？

box-shadow 和 drop-shadow 有什么区别？

什么是内阴影 (inset box shadow)？

微妙的卡片效果有哪些推荐的 box-shadow 值？

文本修改工具:

常用工具: