新拟态（Neumorphism）是什么？

一种拟物风格：元素与背景同色，靠一对方向相反的阴影（一亮一暗）营造从背景里“挤出/凹进”的柔和立体感，像软塑料按钮。核心是同色底 + 双向 box-shadow。

为什么我的新拟态看起来很奇怪？

最常见原因是元素背景色与父容器背景色不一致——新拟态要求两者同色，阴影才自然。其次是底色太深或太纯，建议用中性浅灰（如 #e0e5ec）。

不加 inset 是凸起（从背景挤出），加 inset 是凹陷（按下/嵌入）。本工具勾选「凹陷 inset」即可切换，常用于做“按下态”交互反馈。

低对比是它的通病——元素与背景同色、边界靠柔和阴影，弱视用户可能难以分辨，文字对比也容易不达标。生产环境建议谨慎使用，或与清晰的边框/文字对比结合。

由底色自动算出双向阴影（一亮一暗），调距离、强度、圆角，支持凸起 / 凹陷 inset，实时预览并复制 CSS。纯前端。

底色

凹陷 inset

尺寸20圆角50px距离10px强度30

CSS 代码

border-radius: 50px;
background: #e0e5ec;
box-shadow: 10px 10px 20px #c2c7ce,
            -10px -10px 20px #feffff;

提示：新拟态要求元素与容器背景同色才自然。底色宜用中性浅灰（如 #e0e5ec），过深会失去立体感。

新拟态靠一对方向相反的阴影（左上偏亮、右下偏暗）从背景里“挤出”立体感，因此元素背景色要和父容器背景色一致，否则阴影会显得突兀。本工具生成的代码已同时设置了 background，把它用在同色容器里即可。

新拟态天生低对比——边界柔和、易与背景混淆，文字对比也常不达标。重要交互元素慎用，或结合清晰边框/足够的文字对比度。

本工具是 出海导航 chdh.me 免费在线工具集的一员，同类还有 CSS box-shadow 生成器、毛玻璃效果生成器、 CSS 渐变生成器，均纯前端运行、不上传、不追踪。