免费 CSS Box Shadow 生成器

依次为：inset（可选）、X 偏移、Y 偏移、模糊半径、扩展半径和颜色。X 为正值时阴影向右移动，Y 为正值时阴影向下移动。模糊为 0 时边缘是硬边。本工具始终以 px 写出全部四个长度值，然后是颜色。

使用较小的 Y 偏移、较大的模糊和较低的不透明度，扩展接近 0。这里可以从 Y 6 px、模糊 24 px、不透明度 12% 开始，得到 0px 6px 24px 0px #0000001f。再添加一个更紧凑的图层，可以增强层次感。

模糊用来柔化阴影的边缘，模糊值越大，阴影在越宽的区域内渐隐。扩展则是在模糊之前放大或缩小阴影：正的扩展值会让阴影比盒子更大，负值则让它更小。这里模糊范围为 0 到 100 px，扩展范围为 -50 到 50 px。

点击「添加阴影图层」。每个图层都有自己的标签页和设置，代码会用逗号把它们连接起来，每个图层占一行。在 CSS 中，列表里的第一个阴影绘制在最上面，所以图层 1 位于其他图层之上。

选中图层并勾选「内阴影」。代码会加上 inset 关键字，阴影将绘制在盒子内部而不是外部。使用 inset 时，正的扩展值会让内阴影更厚。你可以在同一条规则中混合使用内阴影和外阴影图层。

使用两个偏移方向相反的图层：一个深色，例如 15% 的 #000000，X 和 Y 均为 8 px；另一个为白色，偏移 -8 px，不透明度 100%。让元素和它的父级使用相同的柔和背景色。这里的预览卡片始终是白色，所以请在你的页面上检查最终效果。

box-shadow 沿着元素的盒子及其圆角绘制，并支持扩展和内阴影。滤镜 drop-shadow() 则沿着可见形状绘制，例如透明 PNG 或 SVG 图标，但不支持扩展和内阴影。本工具只生成 box-shadow。

不会。阴影不占用空间，因此不会挤开其他元素，也不会改变盒子的大小。设置了 overflow: hidden 的父级可能会裁切阴影，所以当模糊或偏移较大时，请在元素周围留出一些内边距。

本工具会把不透明度转成两位十六进制数字追加到颜色后面，因此只支持 #1e293b 这样的 6 位十六进制颜色码。#fff 这样的短码、颜色名称和 rgba() 都会变成无效的 CSS，导致阴影消失。输入小于 0 的模糊值或大于 100 的不透明度也会出现同样的问题。

不能直接得到，因为输出的是纯 CSS。在 Tailwind 中，你可以把这些值放进任意值阴影类，并把每个空格换成下划线，例如 shadow-[0px_4px_12px_0px_#00000026]，也可以把完整的值作为自定义阴影添加到你的主题中。

是的。它免费，无需账号，阴影和图层数量也没有上限。你设置的数值只保留在当前标签页中，不会被保存，所以刷新后会恢复为默认阴影。在线上站点中，Google Analytics 会统计「复制 CSS」的点击次数，但绝不会记录阴影的数值。