Box Shadow CSS Generator

把脑子里那道 CSS box-shadow 一次调对——不用猜，也不用改一行刷新一次。拖动 offset、blur、spread、颜色和 opacity，看真实元素同步变化，然后一键复制干净的代码。 大多数阴影工具只是网页，给你一层扁平的阴影。这是一个原生 iOS 工作台，按照真实光影的方式来做：最多叠六层阴影，任意一层可切成 inset，在浅色或深色 canvas 上预览，再把同一个结果导出成 CSS、SwiftUI，或 Tailwind 的 arbitrary-value 工具类。全部在本机运行，飞机上、沙发上、开会时都能用。 你能得到什么 - 实时预览元素，阴影效果与浏览器渲染一致，可切换浅色或深色 canvas - offset X、offset Y、blur radius、spread、opacity 的精细滑块，外加取色轮和 hex 输入框 - 最多六层堆叠，可上下调序、单独禁用或删除，做出多光源的真实层次 - inset 内阴影，用于按下态按钮、凹槽和 neumorphism 表面 - 三种形态一键复制：CSS box-shadow、链式 SwiftUI shadow 修饰符、Tailwind shadow-[...] 工具类 - 十二个精选预设，覆盖 Material elevation、柔和卡片、长阴影、发光、neumorphism 与 inset——外加你自己的收藏库 适合谁用 - 想直接拿到可用 box-shadow 代码、又不想开 codepen 的前端开发者 - 需要把设计稿里的阴影还原成具体数值的 UI 与产品设计师 - 想找到网页阴影在 iOS 上对应写法的 SwiftUI 开发者 - 想真正搞懂 blur、spread、inset 各自作用的学生和自学者 为什么不用免费网页生成器？ 因为网页生成器只有一层，没有 inset，不输出 SwiftUI 和 Tailwind，也没地方存下你上周调好的那道阴影。在这里你可以叠层、按名字保存，几个月后照样调出来——离线可用，就在你手边这台设备上。 隐私 无账号、无注册、无广告，不对你的作品做任何分析统计。每一道阴影、每个预设、每条保存记录都只留在本机。你设计的内容不会被上传到任何地方。 完整版权限 完整版权限解锁多层阴影（最多六层）、inset 开关、SwiftUI 与 Tailwind 导出、全部高级预设，以及无上限的保存库。可选择周订阅、年订阅，或一次性买断的终身版。免费版保留单层编辑和 CSS 复制。 打开 Create 标签，拖动 blur 滑块直到卡片像浮起来一样，然后点 Copy CSS。 Terms of Use (EULA): https://web-levi.web.app/terms Privacy Policy: https://web-levi.web.app/privacy-policy 有疑问？请联系 [email protected]