🎨
免费 CSS 盒阴影生成器
可视化构建 CSS box-shadow，带实时预览、多层叠加、颜色选择器、内阴影切换和一键复制。包含 Material、新拟物和发光预设。
加载后可离线使用
预览背景
拖动方框以定位活动图层的阴影 - 按住Shift进行微调
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);预设
常见用途
- 卡片UI阴影为仪表板、产品网格和仪表板建立优雅的卡片阴影。
- 按钮按压效果建立模拟真实世界深度和按压状态的按钮阴影。
- 神经形态软UI使用成对的浅色和深色阴影创建柔和的UI神经形态外观。
- 模态和弹出窗口阴影为对话框和下拉菜单创建提升的浮动感觉。
- 发光和焦点环效果创建发光效果、焦点环和霓虹风格的亮点。
工作原理
阴影生成器是完全在客户端运行的 React 工具——没有服务器、没有库。它在状态中维护阴影层对象列表，每次更改时使用手写的 rgba() 格式化函数组装有效的 CSS box-shadow 字符串，并通过 React 的 style 属性直接应用到预览元素上，由浏览器自身的渲染引擎即时绘制结果。
- 1图层参数传入格式化函数每个阴影层存储 x/y 偏移、模糊、扩展、十六进制颜色和不透明度。每次更改时，一个小型 shadowToCss 函数用正则将十六进制颜色转换为 RGB 分量，然后组装 rgba() 字符串——例如 0px 4px 12px 0px rgba(0, 0, 0, 0.15)。多个图层用逗号连接。
- 2浏览器渲染实时预览组装好的字符串在 JSX 中直接赋给 div 元素的 boxShadow 样式属性。React 更新 DOM 属性，浏览器的 CSS 引擎立即绘制阴影——不涉及 canvas 或 WebGL，只有原生 CSS 渲染。
- 3拖动定位使用 Pointer Events API在预览框上点击并拖动会对元素调用 setPointerCapture，然后跟踪 onPointerMove 的位移，实时更新当前图层的 x 和 y 偏移。按住 Shift 会应用 0.25 倍的缩放系数，便于精细定位。
- 4输出复制到剪贴板工具从同一图层数据生成两种输出格式：标准 CSS box-shadow 声明，以及 Tailwind 任意值类（shadow-[...]），其中空格按 Tailwind 语法规则替换为下划线。一键复制使用 navigator.clipboard.writeText。