使用方法
- 挑底色：用取色器或直接改十六进制文本框，两者联动。默认 #e0e0e0，这也是新拟态最典型的浅灰底；只接受 #rgb 与 #rrggbb 两种写法，其它形式会给出具体提示。
- 填偏移距离 d，默认 20，允许 2～60。它同时决定阴影偏移与模糊：模糊取 2 × d，所以改这一个数，阴影的远近和柔和度会一起变。
- 填强度，默认 0.15，允许 0.02～0.5。它决定亮色与暗色被推出多远：0.15 表示往白、往黑各走 15%。
- 填圆角，默认 24，允许 0～200；再选形状：凸出用外阴影，凹陷与按压用 inset，按压的距离自动缩到 0.3 倍。
- 点「生成 CSS」或裸按 Enter，结果区给出完整声明（background + border-radius + box-shadow），下方单独给出 box-shadow 一行，预览方块同步更新；点「复制 CSS」直接带走。
这个工具能解决什么问题
一是把「凭感觉调阴影」变成有公式可依。手写新拟态时，很多人反复试 #ffffff 与 #000000 的透明度，试出来的颜色与底色无关，换个底色就得重来。Neumorphism生成器让亮暗两色由底色按比例混合导出，底色一改，两色自动跟着走，风格不会串味。
二是一次给出可直接粘贴的声明。新拟态至少要两条阴影：一条向右下、一条向左上，颜色一暗一亮。少了任何一条就只剩投影，看起来像普通卡片而不是软界面；本页两条一起生成，并连同 background 与 border-radius 一起输出，粘进样式表即可。
三是把三种形态的差异讲清楚。凸出、凹陷、按压只差 inset 关键字与距离的倍数，但视觉语义完全不同：凸出是可点的块，凹陷是槽或输入框，按压是「已经按下」。对照表里同一组参数给出三种结果，可以直接横向比较。
本页不做这些事：不生成渐变或玻璃拟态；不做多元素的光照一致性检查；不评估你整站的对比度是否达标。它只回答「给定底色与这四个参数，新拟态的 CSS 是什么」。
原理与变量说明
前提：元素与背景必须同色。新拟态不靠描边、不靠色差，只靠阴影的方向与明暗制造起伏。所以本页输出的 background 与预览区背景是同一个色值，一旦把它放到别的底色上，两条阴影会立刻露馅——这是它与普通阴影最大的区别，也是它挑背景的原因。
亮色与暗色怎么来。逐通道线性混合：mix(a, b, t) = round(a + (b − a) × t)。亮色 = mix(底色, #ffffff, 强度)，暗色 = mix(底色, #000000, 强度)。以默认值为例，底色 224，亮色 = round(224 + (255 − 224) × 0.15) = round(228.65) = 229 = #e5e5e5；暗色 = round(224 + (0 − 224) × 0.15) = round(190.4) = 190 = #bebebe。
这里藏着一个反直觉的现象。亮底上，往白只走了 4.65 阶（离白只剩 31 阶的 15%），往黑却走了 33.6 阶（自身亮度 224 的 15%）。所以浅色底上暗部远比亮部显眼，凸起感几乎全靠右下那道暗影撑起来。换到深底则完全反过来：#2e3239 在强度 0.15 下亮色跳到 #4d5157（+31 阶），暗色只到 #272b30（−7 阶），深色主题的高光成了主角。这就是为什么同一组参数照搬到深色模式会「发飘」。
模糊为什么取 2 × d。偏移 d 决定阴影往右下挪多远，模糊半径取它的两倍，是为了让阴影边界完全化开、看不出硬边，只在右下留一团逐渐变淡的暗。距离 20 → 模糊 40；距离拉到 60 时模糊 120，块面会显得离底板很远，小卡片上通常不合适。
三种形态的差别。凸出是外阴影，暗在右下、亮在左上，视觉上光源来自左上；凹陷把两条都加上 inset，阴影画在盒子内侧，于是同一个方向的光照下看起来是「挖下去一块」，常用来做输入框与轨道槽；按压同样用 inset，但距离取 round(d × 0.3)——按下后形变量变小，模糊也跟着缩到 2 × 6 = 12，这正是「按下」的手感来源。
完整示例（默认输入实测）
Neumorphism生成器的默认条件是：底色 #e0e0e0、距离 20、强度 0.15、圆角 24、形状凸出，与页面打开时的控件取值完全一致。逐步核对：
- 解析底色得通道 (224, 224, 224)，规范化后仍是 #e0e0e0；
- 亮色 = round(224 + 31 × 0.15) = 229 → #e5e5e5；暗色 = round(224 − 224 × 0.15) = 190 → #bebebe；
- 模糊 = 2 × 20 = 40，凸出不用 inset，于是得到 box-shadow: 20px 20px 40px #bebebe, -20px -20px 40px #e5e5e5;；
- 连同底色与圆角，完整声明为 background: #e0e0e0; border-radius: 24px; box-shadow: 20px 20px 40px #bebebe, -20px -20px 40px #e5e5e5;。
再换两种形态交叉验证。凹陷：两条都加 inset，其余不变，得到 box-shadow: inset 20px 20px 40px #bebebe, inset -20px -20px 40px #e5e5e5;——亮暗两色与凸出完全相同，变的只是画在内侧还是外侧。按压：距离取 round(20 × 0.3) = 6，模糊 12，得到 box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #e5e5e5;。三者共用同一套亮暗色，只有方向与尺度不同，这正是预设表前四行能直接对照的原因。
对照表
下表给出 16 组常见组合，每行都列出底色、距离、强度、形状，以及由同一套算法算出的亮色、暗色与完整 box-shadow。前 12 行直接显示，后 4 行点「加载更多」展开。
横向读这张表能看出三件事：同一底色下距离越大，模糊越大、块面越飘；强度从 0.05 提到 0.30，亮暗两色的差距从几个色阶拉开到几十个色阶；凹陷与凸出共享同一对亮暗色，区别只在 inset。
表里的深色组合（#2e3239、#1f2937）说明深色主题下高光主导，需要比浅色主题更小的强度才不至于发飘。需要带走时，点「导出对照表 CSV」得到带 UTF-8 BOM 的文件，Excel 打开中文不乱码；点「复制对照表」得到 TSV，可直接粘进任意表格软件。
结果边界与舍入
- 色值格式。只接受 #rgb 与 #rrggbb，不区分大小写，三位写法会展开成六位（#eee 等同于 #eeeeee）。写成 rgb(…) 或漏掉 # 都会给出写明字段名的提示，不会静默回退成黑色。
- 距离与圆角。距离允许 2～60、圆角允许 0～200，超出会提示具体区间；两者都按整数参与输出，填小数会被四舍五入后再生成。
- 强度。允许 0.02～0.5。低于 0.02 时亮暗差距不到 1 个色阶，肉眼几乎不可辨；高于 0.5 时亮暗走向各自的极端，柔和感消失，变成硬投影。
- 通道取整。混合结果逐通道四舍五入到 0～255 的整数，所以强度很小时亮暗可能与底色同值（例如纯白底 #ffffff 的亮色仍是 #ffffff），这是算法的结果而不是出错。
- 性能边界。两条阴影意味着两次独立的高斯模糊与合成，距离越大模糊越大、开销越高；大面积、多元素同时使用时，低端设备滚动可能掉帧，宁可减小距离也不要叠更多层。
- 无障碍边界。新拟态的对比度天生很低：默认组合下亮色与底色的对比度约 1.05:1、暗色约 1.41:1，都远低于 WCAG 对非文本元素要求的 3:1。它不能作为区分元素的唯一手段，务必配合文字标签、图标或边框。
- 全程本地。所有计算只在当前浏览器执行，不发起网络请求，不写 Cookie 与 localStorage，刷新即回到默认示例。
常见问题
为什么元素必须和背景同色？
新拟态靠阴影的方向与明暗表现起伏，不靠色差。元素换成别的颜色后，两条阴影的方向感还在，但边界会露出来，看起来就成了普通投影。本页输出的 background 与预览区背景用的是同一个色值，就是为了满足这个前提。
亮色和暗色是怎么算出来的？
逐通道线性混合后取整：亮色 = round(底色 + (255 − 底色) × 强度)，暗色 = round(底色 + (0 − 底色) × 强度)。默认 224 与强度 0.15 得亮色 229、暗色 190，即 #e5e5e5 与 #bebebe。
模糊为什么要取距离的两倍？
为了让阴影边界彻底化开。偏移只决定阴影挪多远，模糊决定它化得多柔；取两倍时，右下那一团暗从元素边缘向外渐隐，看不出硬边，才有「从底板里长出来」的感觉。
凸出、凹陷、按压该选哪个？
可点击的块状元素选凸出；输入框、轨道槽、已选中的容器选凹陷；需要表现「正在被按下」的按钮选按压。后两者都用 inset，按压的距离只有凸出的 0.3 倍，形变更小。
我把强度调到 0.5 为什么反而难看？
强度越大，亮暗两色越接近纯白与纯黑，阴影变得又黑又硬，柔和感消失，看起来就是普通投影。浅底上 0.10～0.20、深底上 0.06～0.15 通常是更稳妥的区间。
深色主题要怎么调？
深底上往白混合的幅度远大于往黑，高光会非常抢眼。做法是降低强度（例如 0.08），必要时同时减小距离；对照表最后四行里有 #1f2937 与 #2e3239 的样例可以直接参考。
填 #eee 或 rgb(224,224,224) 可以吗？
#eee 可以，会被展开成 #eeeeee 参与计算；rgb(224,224,224) 不可以，本页只接受十六进制写法，会提示「底色」不是合法色值并给出允许的形式。
新拟态能直接用在生产环境吗？
可用，但不能只靠它传达信息。默认组合下亮暗与底色的对比度只有 1.05:1 与 1.41:1，远达不到 3:1 的非文本对比要求；弱视用户在纯新拟态界面上很难分辨边界，请配合文字、图标或细边框。
相关工具
- CSS长方体阴影生成器：按四值语法调 offset、blur、spread 与颜色，比新拟态更通用。
- 渐变色生成器：给底板加渐变，注意新拟态要求底板纯净，两者混用要谨慎。
- 颜色配色生成器：挑底色与点缀色，再把底色带回本页生成阴影。
- CSS圆角生成器：四角独立的 border-radius，与本页的圆角参数互补。
- CSSButton生成器：把生成好的阴影贴到按钮上，做按压与悬浮两态。
更多样式生成工具见生成器分类页。