CSS 新拟态(Neumorphism)生成器

工作原理

新拟态通过两个与背景同色系的相反阴影,让元素看起来略微凸起或凹陷于背景之中:一个偏亮的阴影朝向左上方,一个偏暗的阴影朝向右下方。该工具会根据所选背景色计算这两种色调,并实时组合出对应的 box-shadow 属性。

为什么两个阴影必须使用相同的基础颜色?

新拟态效果依赖的是同一种颜色(背景色)的明暗变化,而不是像传统阴影那样使用对比强烈的颜色;正是这种相近的色调,营造出这种风格特有的柔和、「塑形」般的观感,而不是传统的投影。

这种效果适合用在哪些元素上?

新拟态很适合用在纯色浅色或深色背景上的按钮、卡片、表单字段或图标;但在带图片或渐变的背景上很难辨认,还可能因对比度不足而带来无障碍问题,大规模使用前请务必测试。

不会向任何服务器发送数据:阴影的组合完全在您的浏览器中完成。