可视化 CSS 投影生成器:多层、内阴影、颜色 / 模糊度调节,实时预览。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
box-shadow: 0px 8px 24px -4px rgba(15,17,28,0.35);
这个工具能做什么
一个所见即所得的 CSS `box-shadow` 可视化生成器,支持多层叠加、外阴影 与内阴影混合、每层独立调节偏移(offset-x / offset-y)、模糊半径(blur)、 扩散半径(spread)和颜色(含透明度)。预览面板是一个真实的 DOM 方块, 用输出区给出的同一段 CSS 渲染,所见即生产环境所得,不存在"预览和实际 不一致"的问题。需要几层就加几层,合成阴影字符串每次按键实时重算,无需 编译。内置 6 个高品质预设:Material Design 1、3、5 级标准 elevation; Apple macOS 风的柔和深度;锐利的"描边浮起"硬阴影;以及用于按钮按下、 输入框凹陷的干净 inset 投影。一键复制可直接粘贴的 `box-shadow:` 声明, 塞进 CSS 文件、styled-component、Tailwind 的 `shadow-[<value>]` 任意值 语法、或者 React 的 `style={{ boxShadow: '...' }}` 都能跑。100% 浏览器 本地运行:没有任何网络请求,没有注册,数值不会被记录。常用场景:按钮、 卡片、弹窗、下拉菜单,任何"4 像素和 8 像素 blur 的差别就是廉价和 讲究的差别"的界面。
工具细节
- 输入
- 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 22 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 投影生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把设计师 Figma 卡片的投影一比一搬进 React 代码
设计师丢给你一张 Figma 卡片,上面叠了两层投影:一层柔和的环境光,一层 紧贴的接触阴影。在 DevTools 里凭眼睛调死活对不上。把 Figma Effects 面板里 的 X、Y、blur、spread、颜色逐项读出来,在这里每层填进去,复制合成字符串 粘进 styled-component。预览跟生产像素一致,走查一次过,不用再来三轮「再 柔一点」。
用纯 CSS 替掉九宫格 PNG 投影
一个老弹窗用 40KB 的切片 PNG 做边缘光晕,你想干掉它。下层叠一条宽环境光 (0 8px 32px rgba(0,0,0,0.12)),上层叠一条更锐的关键光(0 2px 8px rgba(0,0,0,0.20)),调到看上去跟 PNG 一致,最后输出单行 box-shadow。一下 省掉 40KB,少一个 HTTP 请求,阴影还能跟元素一起缩放,不再像切片那样被拉变形。
给按钮做按下态的内阴影
按钮一点下去显得很平。从 inset 预设起步,偏移设 0 2px,blur 4px,spread 0, 配一个暗一点的透明色,再绑到 :active。这样按下时按钮就靠 2px 内阴影明显 凹下去。工具的 inset 实时预览能帮你看清 spread 会不会侵到文字,小按钮上 超过 1px 就会侵。
给设计系统定一套可复用的 elevation 阶梯
组件库需要三档 elevation token:静止、悬停、浮层。基于 Material 1、3、5 三个预设各生成一个值,复制后在 Tailwind 主题里注册成 shadow-rest、 shadow-hover、shadow-overlay。之后所有卡片、菜单、对话框都从三个具名 token 取值,不用再在代码各处手敲 20 条散落的 rgba 字符串。
常见踩坑
把暗度全堆在一层。单独一条 0 10px 20px rgba(0,0,0,0.5) 显得很廉价,拆成一层柔和环境光(低透明度、大 blur)加一层紧凑关键光(高透明度、小 blur)才有真实层次。
忘了透明度,用纯色。box-shadow 用
给动画元素加超大 blur+spread。给一个做 transform 动画的卡片挂 0 0 200px 100px 的光晕会拖垮 paint 预算,凡是每帧都动的元素 blur 都要克制。
隐私说明
全部在你的浏览器里运行。你调的阴影层、颜色和预设都留在本页,不会发到任何 服务器。注意这个工具不会把你的数值写进 URL,所以直接复制页面链接不会把阴影 配置带给同事,想分享某个值就复制那段 box-shadow 字符串本身。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。