拟物化（Neumorphism）生成器
可视化生成新拟态（Neumorphism）样式：背景色、凸起 / 凹陷 / 扁平形状、大小、圆角、偏移距离、模糊、对比强度与光源方向（暗色主题可切），可选文字与图标，实时预览并输出 CSS 与 HTML。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
实时预览
高光与暗部都由背景色推导，改底色所有颜色跟着变
预设
点击预设直接套用
CSS 代码
.neumorphic {
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 160px;
background: #E0E5EC;
border-radius: 32px;
box-shadow: -12px -12px 24px #F0F2F6, 12px 12px 24px #86898E;
color: #4E5053;
font-size: 15px;
font-weight: 500;
}<div class="neumorphic"> <span>新拟态</span> </div>
这个工具能做什么
- 调 UI 细节时不用反复手改 CSS：拖滑块改背景色、圆角、偏移距离、模糊半径与对比强度，实时预览满意后直接复制 CSS。
- 需要「凸起 / 凹陷 / 扁平」三种状态：凸起用双向外阴影，凹陷用 inset 阴影，扁平直接 box-shadow: none，做按钮的按下态很方便。
- 配色跟着品牌色走：高光和暗部都从背景色推导，改一次底色整组颜色就跟着变，不用手动挑两个阴影颜色。
- 暗色主题适配：勾上「暗色主题」后高光会收敛、暗部会加重，避免在深色背景上凸起几乎看不见。
示例
输入
背景色：#E0E5EC 形状：凸起 圆角：32px 偏移距离：12px 模糊半径：24px 对比强度：100 光源方向：左上 文字：显示「卡片」
输出
.neumorphic {
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 160px;
background: #E0E5EC;
border-radius: 32px;
box-shadow: -12px -12px 24px #F0F2F6, 12px 12px 24px #86898E;
color: #4E5053;
font-size: 15px;
font-weight: 500;
}高光 #F0F2F6 是背景色混 50% 白、暗部 #86898E 是混 40% 黑的结果；这些颜色都由「对比强度」决定，改底色会整体重算。
常见问题
高光和暗部的颜色是怎么算出来的？
颜色不是手选的：高光 = 背景色向白色混合，暗部 = 背景色向黑色混合，混合比例由「对比强度」决定。强度 100 时最多混 50% 白、40% 黑；暗色主题下改成 25% 白、75% 黑，这样深色背景上的凸起才看得出来。
为什么修改光源方向只有阴影方向变了？
光源方向只翻转两个阴影的偏移方向，不改变颜色。选左上时高光在左上（负偏移）、暗部在右下；选右上则完全镜像。这是新拟态里区分「光从哪来」的唯一参数。
背景色只能填 HEX 吗？
是。支持 #RGB、#RRGGBB，也容忍 #RGBA / #RRGGBBAA 这类 4 位和 8 位写法（会读前 6 位并统一成 6 位大写 hex）。写 rgb()、hsl() 或颜色名会提示「颜色必须是合法的 HEX 值」。
扁平形状为什么没有阴影？
这是刻意设计：flat 的 box-shadow 直接输出 none，用来和凸起 / 凹陷做对比，或者只借用圆角与背景色做卡片底。想要一点点悬浮感，把形状切回凸起并把偏移距离调小即可。
生成的样式有什么使用门槛？
新拟态依赖「元素底色 = 父级底色」，所以把生成的 background 换成和容器一致的颜色时效果最好，放在纯白或纯黑底上会失去立体感。CSS 与 HTML 片段都在本机生成，不会上传。
关键词：neumorphism新拟态拟物化soft uibox-shadowcss 生成器扁平化暗色主题阴影ui 设计