可视化 CSS 投影生成器 —— 多层、内阴影、颜色 / 模糊度调节,实时预览。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
第 1 层
水平偏移 0
垂直偏移 8
模糊 24
扩散 -4
颜色
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 投影生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。