🎨 新拟态 CSS 生成器

Neumorphism / Soft UI — 调整参数,预览效果,一键复制 CSS 代码

生成的 CSS

常见问题

什么是新拟态(Neumorphism)?

新拟态是一种融合了拟物化与扁平化设计的 UI 风格,通过两个方向相反的 box-shadow(一亮一暗)营造出物理凹凸感,让界面元素看起来柔和而立体。

新拟态 CSS 怎么实现?

核心是使用 CSS box-shadow 属性设置两组阴影:一组亮色模拟光源照射,一组暗色模拟背光面。通过调整偏移量、模糊半径和颜色对比度来控制立体深度。

新拟态适合什么场景?

适合卡片、按钮、表单控件、仪表盘等交互组件,尤其是浅色背景的简约风格页面。不建议大面积用于文字密集区域以免影响可读性。

凸起、凹陷和浮雕有什么区别?

凸起(Convex)用外阴影模拟元素浮出表面;凹陷(Concave)用内阴影 inset 模拟按入效果;浮雕(Emboss)模糊更小、立体更锐利,类似浮雕质感。