CSS阴影生成器（box-shadow）
可视化设计CSS阴影，支持多图层、内阴影、模糊、扩展和颜色。实时预览，可导出CSS、SCSS或Tailwind。
免费 在浏览器中运行 无需注册
正在加载CSS阴影生成器…
您的文件绝不离开您的设备
如何使用CSS阴影生成器
- 1
在此页面打开CSS阴影生成器，它直接在浏览器中加载。
- 2
添加文件、文本或数值，并调整设置。
- 3
复制或下载结果。不会上传或存储任何内容。
关于此工具
CSS的box-shadow属性能为卡片、按钮和图片增加层次感，但手写数值全靠猜。这款阴影生成器让你用滑块设计阴影，在实时预览盒子上查看效果，然后复制干净的CSS、SCSS代码或Tailwind配置项。
如何创建阴影
- 设置水平和垂直偏移来移动阴影。
- 增大模糊让边缘更柔和，调整扩展来放大或缩小阴影。
- 选择颜色和透明度。
- 勾选inset可把阴影放到盒子内部。
- 添加更多图层，复制或删除图层，并单独开关每一层。
- 修改预览盒子的颜色和背景以匹配你的设计，然后复制代码。
box-shadow语法
box-shadow: [inset] offset-x offset-y blur spread color;
例如box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);会在元素正下方产生柔和的阴影。多个阴影可以用逗号分隔组合在一起，第一个绘制在最上层。
常用阴影配方
- 柔和卡片：小偏移、大模糊、低透明度，例如0 4px 12px，黑色透明度10%到15%。
- 真实层次：两个图层，一个靠近元素、较深且紧凑，另一个较远、宽大且非常浅。
- 按下的按钮：在顶部边缘使用内阴影。
- 发光或霓虹：零偏移、大模糊和鲜艳的彩色阴影；叠加两种颜色效果更强。
- 集中阴影：负扩展让阴影比盒子更窄，只在下方露出。
小贴士
- 整个界面保持同一个光源方向，通常来自上方，让所有阴影朝同一方向。
- 用背景色的深色调代替纯黑来给阴影着色，效果更自然。
- 注意性能：在大量元素上使用很大的模糊值，可能让旧手机滚动变慢。
常见问题
box-shadow的各个数值是什么意思？
依次为：水平偏移、垂直偏移、模糊半径、扩展半径和颜色。在开头加上inset，阴影就会绘制在元素内部。
如何添加多个阴影？
在生成器中再添加一个图层。在CSS中，多个阴影写在同一个box-shadow属性里，用逗号分隔。
什么是内阴影？
绘制在元素边框内部而不是外部的阴影，常用于按下状态的按钮和输入框。
可以把阴影导出为Tailwind类吗？
可以。Tailwind导出会生成用于tailwind.config.js的boxShadow配置项，之后就能像shadow-custom这样作为自定义类使用。
负扩展有什么作用？
它让阴影比元素更小，只在偏移的一侧露出，形成更紧凑、更集中的阴影。
为什么我的阴影看起来太黑？
降低透明度、增大模糊，或用背景色的深色调代替纯黑。