CSS 与前端开发工具

Box Shadow Generator

为卡片或按钮生成 box-shadow,直接在预览中观察每个参数的效果。

参数设置

浏览器本地处理

实时预览

参数修改后自动更新
可直接选择或复制

实时调整卡片阴影的偏移、模糊、扩散、颜色、透明度和 inset。

输入内容仅在您的浏览器中处理,不会上传到服务器。

这个工具是什么

Box Shadow Generator 生成单层盒子阴影,包含水平与垂直偏移、模糊半径、扩散半径、颜色、透明度和 inset。预览卡片会立即应用当前合法参数。

如何使用

  1. 调整水平、垂直偏移与模糊半径。
  2. 设置扩散半径、阴影颜色与透明度。
  3. 按需要开启 Inset 内阴影。
  4. 确认预览后复制 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。

返回开发者工具分类首页