CSS 阴影生成器
可视化生成 CSS box-shadow 值。通过滑块调整水平偏移、垂直偏移、模糊半径、扩散半径、不透明度和颜色，实时预览，支持内阴影模式，一键复制。纯浏览器运行。
使用方法
- 调整水平偏移和垂直偏移滑块来定位阴影。
- 增大模糊半径使阴影边缘更柔和，或设为 0 获得硬边阴影。
- 使用扩散半径来放大或缩小阴影的尺寸。
- 设置不透明度控制阴影透明程度。
- 通过颜色选择器或直接输入 hex 值选取阴影颜色。
- 切换内阴影开关可在外阴影和内阴影模式之间切换。
- 预览框会随任意控件调整实时更新。
- 点击复制将生成的
box-shadowCSS 值复制到剪贴板。
box-shadow 语法参考
/* 基础外阴影 */
box-shadow: offsetX offsetY blur spread color;
/* 内阴影 */
box-shadow: inset offsetX offsetY blur spread color;
/* 多重阴影 */
box-shadow: shadow1, shadow2, shadow3;常见使用场景
- 卡片浮起：
box-shadow: 0 4px 16px rgba(0,0,0,0.12)— 微妙的悬浮卡片效果 - 硬投影：
box-shadow: 4px 4px 0 rgba(0,0,0,1)— 复古 / 粗犷风格 - 焦点环：
box-shadow: 0 0 0 3px rgba(59,130,246,0.5)— 可访问性焦点指示器 - 内凹输入框：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) - 发光效果：
box-shadow: 0 0 20px rgba(99,102,241,0.6)— 霓虹或发光高亮
相关工具
- CSS 变量生成器 — 将阴影值存储为设计 token
- CSS Grid 生成器 — 可视化构建网格布局
FAQ
CSS box-shadow 属性是什么？
CSS box-shadow 属性为元素添加一个或多个阴影效果。每个阴影由水平偏移、垂直偏移、模糊半径、扩散半径和颜色组成。加上 inset 关键字可使阴影显示在元素内部。
每个滑块控制什么？
水平偏移：负值向左，正值向右。垂直偏移：负值向上，正值向下。模糊半径：值越大阴影边缘越模糊，0 表示硬边缘。扩散半径：正值放大阴影，负值缩小。不透明度：0% 完全透明，100% 完全不透明。
什么是内阴影（inset）？
inset 关键字使阴影显示在元素内部而非外部，产生类似凹陷或压入的视觉效果，常用于输入框或被按下的按钮。
工具输出什么颜色格式？
工具输出 rgba() 颜色值，不透明度直接包含在颜色函数中，确保在所有现代浏览器中准确渲染。
可以使用多个 box-shadow 吗？
可以。CSS 支持用逗号分隔多个阴影：box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(255,255,255,0.8)。可将本工具生成的值手动组合实现多层阴影效果。
这个工具是纯客户端运行的吗？
是的。所有生成均在浏览器中完成，不向服务器发送任何数据。