CSS 阴影生成器

CSS 阴影生成器（Box Shadow Generator）

可视化调节 box-shadow 的偏移、模糊、扩散、颜色与透明度，支持多层阴影叠加，并实时生成可直接粘贴使用的 CSS 代码。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端。

功能特性

• 多层阴影：支持 1 至 6 层阴影叠加，各层参数独立配置，输出时按声明顺序排列

• 四项几何参数：水平偏移、垂直偏移、模糊半径、扩散半径，均提供滑块与数字输入双向联动

• 颜色与透明度：取色器与十六进制文本双向同步，透明度以 rgba() 形式输出

• 内阴影：一键切换 inset，用于凹陷或输入框效果

• 实时预览：预览区可切换浅色 / 深色背景，方便观察不同底色下的阴影表现

• CSS 代码输出：生成完整 box-shadow: 声明，支持一键复制

• 随机阴影：一键生成随机偏移与配色

• 颜色规范：#rgb 短十六进制自动补全为 #rrggbb

生成的代码示例

box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 3px 6px 0px rgba(17, 17, 17, 0.2);
box-shadow: inset 1px 2px 3px 4px rgba(245, 158, 11, 0.5);

使用场景

• 快速获取阴影代码：无需记忆 box-shadow 六个参数的含义，调参即得 CSS

• 卡片与按钮质感：制作悬浮、内嵌、发光等不同层次的阴影效果

• 深色模式适配：切换预览背景，直观对比阴影在明暗底色上的差异

• 离线使用：浏览器打开即用，不依赖任何网络资源

快速开始

无需安装与构建，直接用浏览器打开 index.html 即可使用，或在任意静态服务器下访问：

python3 -m http.server 8033
# 访问 http://localhost:8033/index.html

技术栈

• HTML5 + CSS3 + 原生 JavaScript（零第三方依赖）

• 基于状态的多层渲染：layers 数组 → buildShadow() → 预览与代码

• 剪贴板：navigator.clipboard.writeText