CSS 盒阴影（box-shadow）生成器
可视化构建 CSS box-shadow：叠加多层阴影，设置偏移、模糊、扩展、内阴影和 RGBA 不透明度，实时预览并复制简洁的代码。
预设
图层
预览设置
预览
CSS 代码
box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);
相关工具
查看全部什么是 CSS 盒阴影生成器？
这是 CSS box-shadow 属性的可视化编辑器。你可以叠加多层阴影，为每一层分别设置偏移、模糊、扩展、颜色、不透明度和内阴影标志，并在示例方块上查看效果，同时工具会写出对应的 CSS。
如何使用 CSS 盒阴影生成器
- 选择预设（柔和、多层、硬阴影、发光、内阴影、描边环），或从默认阴影开始。
- 选中一个图层，调整“水平偏移”“垂直偏移”“模糊”“扩展”“阴影颜色”和“不透明度”；勾选“内阴影”可得到内阴影。
- 用“添加图层”/“删除图层”构建多层阴影；图层按绘制顺序列出。
- 在“预览设置”中更改背景、元素颜色和圆角半径，在实际场景中评估阴影效果。
- 复制生成的 CSS 代码。
示例
输入
One layer: x 10px, y -5px, blur 20px, spread 3px, color #3b82f6, opacity 1, Inset on
输出
box-shadow: inset 10px -5px 20px 3px #3b82f6;
何时使用 CSS 盒阴影生成器
适合为任意 HTML 元素设计卡片层级感、焦点环、发光或内阴影。文字阴影请使用文字阴影生成器；若要让阴影沿着透明 PNG 或被裁剪元素的形状走，请改用 filter: drop-shadow()（CSS 滤镜生成器），因为 box-shadow 总是沿着元素的边框盒。
CSS 盒阴影生成器 的工作原理
每一层都会变成一个 box-shadow 值，顺序为 [inset] x y blur spread color。长度以 px 书写（零写作无单位的 0）。不透明度滑块会与颜色自身的 alpha 相乘：完全不透明的颜色以十六进制书写，半透明的颜色则写作 rgba(r, g, b, a)。多层阴影用逗号连接，每层一行；第一层绘制在最上面。模糊不能为负，扩展可以为负。
常见用例
- 为卡片和模态框设计 Material 风格的多层立体感
- 用仅扩展的阴影（0 0 0 3px）制作无障碍的焦点环
- 为按下状态的按钮和输入框制作内阴影
- 为行动号召按钮添加彩色发光
- 为新粗野主义设计制作硬偏移阴影
常见问题
多个阴影按什么顺序绘制？
列表中的第一个阴影绘制在最上面，最后一个在最下面。工具按“图层”面板中显示的顺序写出各层。
模糊和扩展有什么区别？
模糊会柔化阴影的边缘（不能为负）。扩展会在模糊之前放大或缩小阴影；负的扩展值会让阴影比元素更小。
还需要 -webkit-box-shadow 吗？
不需要。不带前缀的 box-shadow 在所有浏览器中已支持十多年，所以工具只输出标准属性。
为什么我的透明图片周围没有出现阴影？
box-shadow 沿着元素的矩形盒（包括 border-radius），而不是可见像素。要实现这一点，请使用 filter: drop-shadow()。
推荐的下一步
二维码生成器
免费二维码生成器，支持链接、文本、Wi-Fi 登录信息、联系人名片、邮件、短信和电话号码。可设置纠错级别、尺寸和颜色，并下载 PNG 或 SVG。
JWT 生成器
使用 HS256/384/512、RS、PS、ES 或 EdDSA 创建已签名的 JSON Web Token。可编辑载荷、设置 exp 和 iat、生成密钥或密钥对，全部在浏览器中完成。
代码压缩
在一个工具里压缩 JavaScript（Terser）、CSS（CSSO）、HTML、JSON 或 XML：选择语言、粘贴代码，即可看到节省的字节数。免费，在浏览器中运行。
代码美化
在浏览器中一站式美化 14 种语言的代码，涵盖前端脚本、样式表、标记语言、数据格式、查询语言以及 PHP 和 Python，选择语言和缩进即可。
MAC 地址生成器
生成随机 MAC 地址，并正确设置单播/组播和本地管理位，可选厂商 OUI 前缀，以及冒号、连字符或 Cisco 格式。
条形码生成器
在浏览器中创建 EAN-13、EAN-8、UPC-A、ITF-14、Code 128 和 Code 39 条形码。校验位会自动计算或验证，可下载 PNG 或 SVG。