跳到主要内容

新拟物 (Neumorphism) CSS 生成器：双阴影 + Tailwind + SwiftUI

新拟物 (Neumorphism) CSS 生成器, 内/外凸双阴影 + 8 方向光源, 12 套预设, 一键复制 CSS / Tailwind / SwiftUI。

  • 本地处理
  • 分类 生成器
  • 适合 从空白开始,先拿到一版可修改的结果。
软按钮
WCAG 对比度 · 12.97:1
达 WCAG AAA (7:1) —— 对新拟物来说很罕见。
.neumorphism {
  width: 160px;
  height: 160px;
  background: #e0e5ec;
  border-radius: 48px;
  box-shadow: 8px 8px 24px rgba(40, 41, 42, 0.45),
              -8px -8px 24px rgba(246, 247, 249, 0.5);
}

把新拟物的数学算给你: 选好背景色和光源方向, 一键复制 CSS / Tailwind / SwiftUI / styled-components 四种代码。实时 WCAG 对比度警告把这风格的无障碍硬伤直接摆出来, 别让你 ship 一颗审计过不了的按钮。

这个工具能做什么

新拟物 (Neumorphism) 这套软 UI 风格, 2020 年从 Dribbble 火起来, 后来 iOS / macOS 上的 Toggle / 控制中心都借鉴了它。它的核心 只有一个把戏: 元素和它所在的背景共用一个颜色, 然后靠两道方向 相反的阴影 (一道亮的高光、一道暗的凹陷) 在表面上 "雕" 出立体感。 数学算错了, 看上去就只是一块灰糊糊的矩形, 完全没有那种 "按下 去会回弹" 的软质感。这工具帮你把数学算对: 你选好背景色和光源 方向 (8 个方位按钮, 或者直接拖 SVG 的太阳), 它替你算两道阴影 的偏移、两道阴影各自的 alpha, 以及四份描述同一个形状的代码： 原生 CSS、Tailwind 任意值类、SwiftUI 双 .shadow() modifier、 styled-components 模板字符串。12 套预设覆盖你真正会用到的表面: 经典浅 / 经典深, 浅蓝 / 浅粉 / 浅紫 / 浅绿这四种新拟物 Figma kit 里几乎必备的马卡龙色, macOS 风格 / iOS 风格 (按真机背景色调过), Material elevation 感, 还有 "极致柔软"、"强对比"、"brand-aurora" 三种偏品牌向的变体。凸 (outset 双阴影) 和凹 (inset 双阴影) 一键 切换。凸用于按钮/卡片, 凹用于输入框/按下态。 新拟物有一个无法回避的硬伤是无障碍: 因为表面与文字色靠得很近, WCAG 对比度天生不达标。这工具把对比度警告做成实时红字: 一旦 预览里的文字与背景对比度跌破 4.5:1 (body text 的 WCAG AA 门槛), 立刻提醒你, 让你别等上线后被审计才发现。

工具细节

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

怎么用

  1. 1. 输入

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

  2. 2. 处理

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

  3. 3. 复制 / 下载

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

新拟物 (Neumorphism) CSS 生成器 适合怎么用

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

适合生成任务

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

生成检查项

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

下一步可以接着做

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

  1. 1 CSS Grid 可视化生成器 CSS Grid 可视化生成器, 拖动配置列/行, 用 grid-area 命名区域 (header/sidebar/main 等), 一键复制 CSS + HTML, 含 12 套常用模板。 打开
  2. 2 CSS 按钮生成器 做出"真能按下去"的按钮:3D 凸起 / 拟物 / 玻璃质感,实时预览可悬停可按压,导出完整 :hover/:active CSS 打开
  3. 3 CSS 阴影生成器 Pro CSS 阴影生成器 Pro 版, 支持多层 box-shadow / text-shadow / filter:drop-shadow 三合一, 内置 Material/Tailwind/Apple/极光 4 套预设, 含暗色模式预览。 打开

真实使用场景

  • 不再手算双阴影, 直接做出 Dribbble 同款软按钮

    收到一个新拟物的 Figma 稿, 在 Figma 里看着挺漂亮, 一翻译 成 CSS 就走样。把背景色填进来, 选 "经典 light" 预设, 光 源指到左上, tab 切到 CSS。两道阴影已经成对调好、参数也 平衡, 复制就能贴进组件文件。设计/前端在阴影上来回扯 "高光太亮 / 下面那道阴影没了" 的飞书消息可以省掉了。

  • 把 macOS 设置面板那种卡片搬到 Web 上

    要把桌面应用的设置页改成 Web 仪表盘。macOS 侧栏卡片有 一种很特别的 "类新拟物但又不是 Dribbble 那种" 的味道： 柔和、低对比、偏冷。选 "macOS-style" 预设, 凸模式, 复制 CSS。出来的卡片比直接套 "Material 3" 那种通用近似要更贴 近 macOS 实际的色调和阴影。

  • 给表单做一个 "按下去" 的输入框

    想让文本输入框看上去是 "陷进表面里" 的，新拟物里很经 典的输入框写法。任选一个预设, 点凹, 复制 CSS。内嵌的 双阴影把输入框雕进了卡片里。再配上旁边凸的提交按钮, 就 是经典的 "凸按钮 + 凹输入框" 那种很有触感的对比, 整个 表单的物理感就出来了。

  • 评审第三方新拟物组件库的对比度合规性

    供应商给的组件库里带一套 "Soft UI" 主题。先别急着采用, 把每对颜色填进这工具, 看实时给出的 WCAG 比值。十有八 九会发现: 这套主题做装饰卡片、图标时能过, 但一上正文 / 输入框文字就挂。这就是你跟采购沟通的证据: "卡片可以 用, 但所有文本字段和按钮文字都得换一套备用主题。"

  • 把 Web 上的设计原样搬到 SwiftUI

    要把 Web 端的设计移植到 iOS, 想保留同样的软表面。选 "iOS-style" 预设, tab 切到 SwiftUI, 复制进 view。出来 的是叠在 RoundedRectangle 上的两个 .shadow() modifier, 视觉上和 Web 预览一致, 不用再猜 CSS 里 0.7 alpha 对应 SwiftUI 的 Color.white.opacity 是几。

  • 同一个 CTA 跑 "柔" 和 "高对比" 两版 A/B

    想验证新拟物风格的 CTA 到底转化更高还是更低。用同一组 颜色生成两版: "柔" 版套 "极致软" 预设, "高对比" 版把 强度拉满 + 形状色调深, 各自 export 成 CSS 丢进 Optimize / 你们的 A/B 工具。出来是数据, 不是 "设计师和工程师 打嘴仗哪个更好看"。

常见踩坑

  • 做新拟物却不查 WCAG 对比度。这是风格自身的无障碍硬伤：表面、文字、背景明度差不到几个百分点, 对比度天然会塌到 1:1 附近。Ship 前看预览上的实时 WCAG 警告; 一旦标红, 要么加深文字色, 要么换成 3:1 描边的纯图标按钮, 要么只把样式留给装饰表面。**不要假装这问题不存在, 审计里会被打回。**

  • 把形状色调成跟背景色不同的颜色。一旦形状有了自己的填充, 两道阴影就不再是 "从表面里雕出来", 而是 "围着一块染色板的两个无关阴影"。工具的滑块限制了形状色只能在背景色 ±5% 范围内动, 不要绕过这道安全护栏。

  • 只给一道阴影选了光源方向, 忘了把另一道镜像。正确的双阴影是亮在朝光一侧、暗在背光一侧。工具默认成对算偏移, 所以这种错误只可能出在 "你只复制了输出里两道阴影中的一道"。复制时不要落下另一行。

  • 把距离和模糊拉到不真实的极限, 想硬凑 "更立体"。距离超过 30 + 模糊超过 40, 整个效果就不再像软表面, 而是像一块漂浮的板带着诡异灰雾。预设给的就是合理范围; 不够用, 多半新拟物本来就不适合你的场景。

  • 把 inset (凹) 当主 CTA 用。凹的视觉语义是 "已经被按下去了"，适合做按下态, 不适合做静止态。按钮、卡片默认用凸; 凹留给输入框和 "按下" 变体。

  • Tailwind 输出贴到 Tailwind 2.x 又没开 JIT 的项目里。shadow-[...] 任意值语法要 Tailwind 3.0+ 的 JIT (3.0 起默认开)。要么升级 Tailwind, 要么把这段值塞到 tailwind.config.js 的 theme.extend.boxShadow 里当命名 utility 用。

隐私说明

所有渲染都在这个浏览器标签页里完成。12 项配置 (颜色、尺寸、 光源角度、凸凹模式、当前预设、当前导出 tab) 走 URL 仅仅为了 让分享链接能复现一模一样的按钮：颜色码、光照角度、预设选择 不会离开你这台机器。没有图片上传、没有分析调用带配置回传、 也不从 CDN 拉任何字体或图: SVG 太阳、预览形状、演示文字全 靠 inline DOM + CSS 渲染。页面加载完之后完全离线可用。

常见问题

类似工具组合

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

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