CSS 阴影生成器（box-shadow）
在你的设备上运行，不会发送任何内容。一切都在浏览器中运行 - 不会发送任何内容。
从这里开始
图层
水平偏移
垂直偏移
模糊
扩散
颜色
代码
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]编辑已有的阴影
用多图层、内阴影和柔和预设设计 CSS 阴影，实时预览，复制 CSS 或 Tailwind 类名。也可粘贴现有阴影继续编辑。
凭眼睛调出想要的阴影，而不是猜数字。先从预设开始 - 柔和、中等、硬朗复古、柔和多层、悬浮、内阴影、新拟态或发光 - 再微调每个图层的偏移、模糊、扩散、颜色、不透明度和内阴影，拖动时预览实时更新。阴影最多可有八个图层，最自然的阴影正是这样叠出来的。把结果复制为 CSS 或 Tailwind 类名、用链接分享，或者粘贴样式表中的 box-shadow 继续修改。
常见问题
模糊和扩散有什么作用？
模糊让阴影边缘变柔和：0 是清晰的线，数值越大过渡的像素越多。扩散在模糊之前放大（正值）或缩小（负值）阴影 - 小的负扩散配合大的模糊，就是现代界面常见的柔和内收阴影。
为什么要用多个图层？
真实的阴影在物体附近又暗又清晰，越远越浅越柔。单个图层做不到两者兼顾；像“柔和多层”预设那样叠加几个偏移和模糊逐层翻倍的图层，看起来自然得多。
什么是内阴影？
内阴影画在方块内部而不是外部，让方块看起来是凹进去的 - 适合输入框、凹槽和按下状态的按钮。同一个阴影里可以混合内外图层。
box-shadow 会拖慢页面吗？
少量阴影几乎没有开销。在大量元素上使用很大的模糊，或者直接给 box-shadow 做动画，可能让低端手机掉帧；做动画时，可以改为调整已带阴影的伪元素的不透明度。