这个工具是什么
Box Shadow Generator 生成单层盒子阴影,包含水平与垂直偏移、模糊半径、扩散半径、颜色、透明度和 inset。预览卡片会立即应用当前合法参数。
如何使用
- 调整水平、垂直偏移与模糊半径。
- 设置扩散半径、阴影颜色与透明度。
- 按需要开启 Inset 内阴影。
- 确认预览后复制 CSS,或重置为默认阴影。
使用示例
- 水平偏移为负时,阴影向左移动。
- 扩散半径为正时阴影范围增大,为负时缩小。
- 开启 inset 可把阴影放到盒子内部。
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);原理与 CSS 说明
box-shadow 依次接受 offset-x、offset-y、blur-radius、spread-radius 与 color,可加 inset。偏移和扩散可以为负,模糊半径必须非负;透明度控制阴影与背景的混合程度。
常见用途
- 制作面板、弹窗和按钮层次。
- 比较柔和与锐利的投影效果。
- 为表单元素制作内阴影。
隐私说明
所有输入、计算、CSS 生成和预览都在当前浏览器中完成,不会上传用户内容,不使用后台、数据库、在线 API 或第三方 CDN,也不会自动保存您的输入。
FAQ
blur 和 spread 有什么区别?
blur 控制边缘模糊程度,spread 控制阴影形状在模糊前扩大或缩小多少。
inset 是什么?
inset 将外部投影切换为盒子内部的阴影。
box-shadow 可以有负值吗?
水平偏移、垂直偏移和扩散可以为负,模糊半径不能为负。
这个工具支持多层阴影吗?
当前页面生成单层阴影。CSS 本身允许用逗号连接多层 box-shadow。