新拟态的难点不是圆角，是一亮一暗两道阴影。定底色、转光影角度、调距离与模糊，四张同色样板同时呈现凸起 / 凹陷 / 平凸 / 按压，右边直接给出能粘贴的 CSS。
组件与底色同色才有挤出感；HEX 支持 3 位与 6 位写法，非法值会即时提示并恢复。
| 方案名 | 底色 | 形态 | 角度 | 距离 | 模糊 | 备注（转义后展示） |
|---|
| 同色原则 | 新拟态要求元素与底色同色系，靠一亮一暗两道阴影伪装成从背景里凸起或凹进去；若元素比底色亮或暗太多，就会退化成普通卡片。 |
|---|---|
| 双向阴影 | 凸起用「左上亮 + 右下暗」，凹陷用 inset 内阴影；本页按角度、距离、模糊、强度四个参数算出两道阴影的偏移与颜色。 |
| 明暗系数 | 亮阴影取底色提亮 6%～14%，暗阴影取底色压暗 6%～14%；页面按 HSL 亮度通道计算，避免手工调色出现色偏。 |
| 四种形态 | 提供凸起 / 凹陷 / 平凸 / 按压四种样板，其中按压态是交互反馈常用写法，可直接复制到按钮的 :active。 |
| 深浅适配 | 深色主题下亮暗阴影的对比要反向调整；页面两套主题分别给参数，切换导航深色模式后代码同步更新。 |
| 对比度边界 | 新拟态天然低对比，正文与按钮文字不能只靠阴影区分；页面给出对比度提示与补充描边开关，避免可访问性问题。 |
新拟态（Neumorphism）难在阴影：底色、亮面、暗面只要差一点就会显脏。这个 新拟态生成器 把底色、角度、距离、模糊与明暗强度摊成可调参数，左侧四张实体样板同时展示凸起、凹陷、平凸、按压四种形态，右侧实时输出带亮色与深色两套变量的 CSS。支持一键取色、形态切换、批量方案对照、代码转义导出与分享链接。
取色与阴影计算全在本地完成；HEX 输入支持 3 位与 6 位写法，非法值会即时提示并恢复上一次合法颜色。新拟态对比度偏低，正式产品中建议配合文字标签使用。
扁平卡片靠边框或投影与背景分层；新拟态让组件与背景同色，只用一亮一暗两道阴影模拟「从同一块材料里挤出来」。因此底色必须是同一个色值，不能给卡片单独加白底。
把外阴影换成 inset 内阴影，并把亮暗两道的方向对调即可。本页切换到「凹陷」形态后，代码区会直接给出 inset 版本的 box-shadow，复制就能用。
通常是亮暗强度差太大，或者用了带饱和度的彩色做阴影。建议把亮面提亮 8%、暗面压暗 10%，阴影颜色从底色本身换算，不要直接用纯黑纯白。
要。深色底上亮阴影会更刺眼、暗阴影更容易糊成一团，一般把距离缩到 6px、模糊降到 12px，并把亮面强度压低。页面在深色主题下会给出一组覆盖变量。
输入框的凹陷态很适合，但占位文字与边框辨识度会下降。建议保留清晰的文字标签与 focus 描边，不要只靠阴影表达「这里可以输入」。
每套方案的底色、形态、角度、距离、模糊与明暗强度各占一列，方便比较不同底色下的立体感；导出时按 CSV 双引号规则转义，方案名含逗号也不会串列。
现在只有你自己能看到这条留言（已标上「待审核」），管理员审核通过后才会展示给所有人～
还没有留言，来抢沙发吧！