跳到主要内容

CSS 阴影生成器 Pro:box-shadow / text-shadow / drop-shadow 一站搞定

CSS 阴影生成器 Pro 版, 支持多层 box-shadow / text-shadow / filter:drop-shadow 三合一, 内置 Material/Tailwind/Apple/极光 4 套预设, 含暗色模式预览。

  • 本地处理
  • 分类 生成器
  • 适合 从空白开始,先拿到一版可修改的结果。

卡片 / 按钮 / 弹窗用, 支持 spread + 内阴影

Material 卷起
Tailwind 默认
Apple 风格
Toolora 品牌色
第 1 层
水平偏移 0
垂直偏移 8
模糊 24
扩散 -4
颜色
box-shadow: 0px 8px 24px -4px rgba(15,17,28,0.35);
shadow-lg
{ boxShadow: '0px 8px 24px -4px rgba(15,17,28,0.35)' }

这个工具能做什么

一个工具搞定 CSS 里全部三种阴影:卡片按钮用的 `box-shadow`、文字标题用的 `text-shadow`、PNG 图标和 SVG 用的 `filter: drop-shadow()`。顶部三个 tab 自由切换, 同一组偏移和模糊数值在三种模式下共用。在 box-shadow 里调到 满意, 切到 drop-shadow 看一眼 PNG 上的效果, 不用从头再来。 内置 16 套高质量预设:Material elevation 1 / 2 / 4 / 8 / 12 / 16 / 24 七档 (Google 官方 token, 不是约等于);Tailwind 默认 shadow-sm 到 shadow-2xl 五档 (跟 tailwindcss 源码里的值一字不差);Apple HIG 柔和与清晰两档; 还有 Toolora 自己的 Aurora 品牌阴影, 青色加紫色的双层光晕, 深色背景的 hero 区用这个特别合适。一键切换暗色背景预览, 看看你那个"白底上还行" 的阴影到 #0a0e1a 上是不是直接消失。预览物体可以选卡片 / 按钮 / 圆形 / 文字四种, 调阴影的对象跟你 production 里要用的对象一致。 导出有三种格式:CSS 代码 (老项目可以勾上 `-webkit-` / `-moz-` 前缀); Tailwind className 近似 (在 Tailwind 项目里, 90% 时候你要的就是 `shadow-md`, 这里直接给你算出来最接近的那一档, 不接近你再写 arbitrary value);JS 对象格式 (styled-components / emotion / React inline 都能直接用)。 保存自己常用的阴影组合到"我的预设", 用的是命名空间化的 localStorage, 跨标签页 BroadcastChannel 自动同步, iOS Safari 隐私模式也不会崩。 type / bg / preset / layers 全部接 URL, `?l=...&t=text&bg=dark` 这种链接发给 同事, 打开就是你当时调好的那个阴影, 不用截图也不用解释。100% 浏览器本地 运算, 零网络请求, 不打点, 不分析你的颜色值。

工具细节

输入
文本 + 数值 + 结构化内容
页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
输出
即时结果 + 复制 + 预览
结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
隐私
浏览器本地处理
主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
保存 / 分享
可分享链接状态
关键设置会进入 URL，复制链接后别人能复现同一组参数。
性能预算
首屏 JS ≤ 30 KB
没有声明 WASM 依赖，适合快速打开和移动端使用。
适用场景
生成器 · 设计师
分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。

怎么用

  1. 1. 输入

    把内容粘贴或拖入工具面板。

  2. 2. 处理

    点击按钮,在浏览器内本地处理,文件不上传。

  3. 3. 复制 / 下载

    一键复制结果或下载到本地。

CSS 阴影生成器 Pro 适合怎么用

适合快速生成初稿、起步素材或结构化结果,再人工整理后发布。

适合生成任务

  • 从空白开始,先拿到一版可修改的结果。
  • 生成可重复使用的草稿、名称、模板或占位素材。
  • 先探索多个选项,再挑最适合当前任务的。

生成检查项

  • 生成内容发给客户、上页面或进文档前,必须人工看过。
  • 有品牌语气、格式或受众要求时,不要沿用默认值。
  • 只保留真正符合任务的部分。

下一步可以接着做

这些入口会把当前任务接到更完整的工具链里。

  1. 1 CSS 投影生成器 可视化 CSS 投影生成器:多层、内阴影、颜色 / 模糊度调节,实时预览。 打开
  2. 2 颜色格式转换 HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK 五种互转:实时色板 + 对比度,浏览器本地 打开
  3. 3 CSS 渐变生成器 可视化 CSS 渐变生成器:线性 / 径向 / 圆锥 / 多色断点,实时预览,一键复制 CSS,导出 PNG。 打开

真实使用场景

  • 一个页面三种阴影, 不要在三个工具之间切来切去

    设计稿常见的卡片规格是 "卡片本身有 drop shadow, 里面的标题有柔和的 text-shadow, 角上的图标再加一层 halo 的 drop-shadow"。这就是三个 元素三种 CSS 属性, 以前要么开三个不同的工具, 要么一个工具加上 DevTools 反复 toggle。在这里三个 tab 切来切去就能搞定, 各自复制 CSS 粘到组件 里, 两分钟搞定, 还能把 URL 发给设计师过一下再合并。

  • 给应用主题做一整套 Material elevation

    应用需要 5 种 surface 在 rest / hover / press 三态下的阴影 token。把 M1 → M2 → M4 → M8 → M12 → M16 → M24 依次过一遍, 每个用"JS 对象"导 出粘到主题文件, 一整套阴影体系两分钟到位, 而且数值正确, 因为预设 是直接从 Material Design 2 规范里抄过来的, 不是哪个博客文章里的"约等于 值"。不用这个工具同样的事情至少要 20 分钟翻 Stack Overflow + 反复 调 DevTools。

  • 检查标题在 hero 图上够不够清楚

    hero 区有一张 1920x800 的图, 上面盖白色标题。切到 text-shadow 模式, 加 一层 2px / 4px / 12px 50% 黑色阴影, 切到"暗色背景"看一遍 (图上暗的那部 分), 切到"浅色背景"看一遍 (图上亮的那部分), 调 blur 到两边都 OK。 90 秒解决一个本来要 30 分钟设计 review 的问题。

  • 复刻一个在 Figma / Dribbble 上看到的阴影

    设计师发你一个 Figma 文件, 用了从某个 Dribbble shot 抄过来的阴影。看一 眼 Figma 里 Effects 面板的 X / Y / blur, 输进来, 调 alpha 直到预览跟截 图一样。复制 CSS, 这就是生产版本。不用这个工具的话, 你得在 Figma 和 DevTools 之间来回切, 这边的实时预览就是浏览器实际渲染的同一段 DOM, 预 览里看着对了, 上线就是那样。

  • 审查老项目的 box-shadow 使用情况

    接手了一个 CSS 文件里散着 47 个不同 `box-shadow` 值的老项目。一个个粘 进来, 看一眼 Tailwind className 近似导出, 你会发现 38 个其实跟 `shadow-md` / `shadow-lg` 误差不大。批量替换之后, 设计系统就从"47 个 阴影"变成"5 档标准 elevation", 一天能干完的活, 不用花一个 sprint。

  • 把品牌专属阴影存下来, 以后随时用

    品牌方要求所有卡片用一种青色调阴影 (类似 Aurora 预设, 或者你自定义的 变体)。在这里调好, 点"保存到我的预设", 命个名比如 "brand-card-shadow", 下次开工具就在我的库里。保存走的是 localStorage, 跨标签页 BroadcastChannel 同步, iOS Safari 隐私模式也不崩。不用专门管, 它就是能用。

常见踩坑

  • 该用 box-shadow 的时候用了 text-shadow。元素是 `<div>` 或者任何有背景色的容器, 你要的就是 box-shadow。text-shadow 只画字形轮廓的阴影, 容器的边缘上看不到任何光晕。

  • 给透明 PNG 图标加 box-shadow。阴影画在包围盒后面, 你会看到一个矩形阴影从图标透明区域漏出来。换 filter:drop-shadow(), 它沿 alpha 形状画。

  • 圆角元素的内阴影给了较大正 spread。spread 会"向内收缩可见边缘", 圆角越大、内容区被吃得越多。外阴影用正 spread 没问题, 内阴影先把 spread 设 0。

  • 叠 5 层一模一样的阴影以为会更深。深是深了, 但靠 alpha 累加, 同时绘制开销也上去了, 直接调一层的 alpha 更好。多层是为了组合 "环境光 + 关键光 + 远距弥散" 这种结构, 不是为了"加深"。

  • 在 drop-shadow 模式下发现 spread 和 inset 滑块灰了, 以为坏了。是 CSS 规范根本不让 drop-shadow / text-shadow 用这俩, 工具按规范禁用, 不是 bug。

隐私说明

所有阴影值、应用的每个预设、调过的每个颜色、保存到"我的预设"的每一条, 全部留在你的浏览器里。这个工具是嵌在静态页面上的一个 React 岛, 阴影生 成完全在前端 JavaScript 跑, 没有任何服务端 endpoint 参与, 不打点不分析你 用了哪些预设。"保存到我的预设"用的是浏览器 localStorage, 命名空间 `toolora:CssShadowGeneratorPro:*`, 跟其他工具的数据互不串。分享 URL 里只 有阴影配置本身, 没有用户 ID, 没有 session token, 没有跟踪参数。打开 工具、调好、关闭标签页, 没有一个字节离开你的设备。

常见问题

类似工具组合

做你这行的人, 还会一起用这些。

看这个职业的全部工具
Made by Toolora · 100% client-side · Updated 2026-06-14