新拟物生成器

设计带双重阴影、柔和凸起的新拟物 UI 表面，并复制 CSS。

预览

CSS

—

画布背景与元素颜色一致——这正是营造柔和、凸起的新拟物效果的关键。

基础颜色

同时用于元素及其背景。

形状

光源

尺寸 200px

圆角半径 50px

距离 20px

强度 15%

模糊 60px

手动设置阴影颜色

默认情况下，亮部和暗部阴影由基础颜色推算而来。启用后可自行设置。

关于新拟物生成器

新拟态（Neumorphism）生成器可以设计出柔和的凸起“软 UI”效果：元素看起来像是从背后的表面凸出或凹入。只需选择一个基础颜色，工具会推导出其余一切，因为这种效果只有在元素与其背景共享同一颜色、深度完全由两个方向相反的 box-shadow 营造出来时才成立。

滑块控制几何形态：尺寸、圆角、阴影距离、强度和模糊度。四种形状模式——平面、凹陷、凸起和按压——会切换内部渐变和阴影方向，光源选择器可将高光移动到四个角中的任意一个，使元素与你设计中的光照方向相匹配。

默认情况下，明暗两种阴影颜色是根据基础颜色计算得出的，但手动模式允许你自行设置两者。生成的 CSS——背景、圆角以及双重 box-shadow——只需一次点击即可获取。

新拟态效果依赖于元素与其背后表面共享同一背景色。请把元素放在具有相同基础颜色的容器上——放在白色或对比强烈的背景上，双重阴影看起来会像是发光，而不是立体感。

平面保持表面朴素；凸起添加渐变使其向外鼓起；凹陷使其向内凹陷；按压则完全反转阴影方向，让元素看起来像是陷入表面——这是经典的激活按钮状态。

在对角方向叠加两个 box-shadow：一个深色阴影模拟暗部，一个浅色阴影模拟高光，两者都由基础颜色推导而来。距离决定偏移量，模糊使其变柔和，强度控制它们偏离基础颜色的程度。

使用时需要谨慎。这种风格天生对比度较低，因此应搭配清晰易读的文字、明显的焦点状态，以及交互元素充足的对比度——尽量将柔和外观保留给装饰性表面。

是的，完全免费，且全部在你的浏览器中运行。无需账户即可随时调整、预览并复制 CSS。