新拟态生成器
打造柔和 UI 挤出质感：明暗双阴影、4 种形状模式，全面控制光源、深度与柔和度。
基础
光源与深度
形状
预览
提示：新拟态要求元素背景与页面背景一致——生成器已为两者设置同一颜色。
如何使用新拟态生成器
- 选择基础色——柔和 UI 最适合浅色、略带灰度的颜色。
- 选择光源方向；阴影会落在相反的一侧。
- 用距离与模糊调节深度，用强度控制明暗阴影之间的对比。
- 在平坦、凹陷、凸起与按压四种形状间切换，适配按钮、卡片与输入框。
- 复制 CSS（background + box-shadow 组合）或 Tailwind 类名到您的项目中。
关于本新拟态生成器
新拟态（柔和 UI）通过组合两种阴影让元素看起来像从背景中挤出：一侧是深色阴影，另一侧是浅色高光，元素本身填充与页面背景相同的颜色。最终呈现出柔软、可触摸、近乎实体的界面风格，适用于卡片、按钮与开关。
本生成器会根据您的基础色自动计算明暗阴影颜色，并搭配四种形状模式：平坦（经典挤出）、凹陷与凸起（曲面渐变填充）、按压（内阴影的按下状态）。请记住：元素背景必须与页面背景一致，视错觉才成立——预览中两者是一起展示的。
新拟态常见问题
为什么新拟态在我的页面上没有效果？
这种风格依赖元素与背景的融合：元素必须使用与其背后表面相同（或非常接近）的背景色。如果您的页面背景与所选基础色不同，请统一其中之一——这正是生成器把预览舞台涂成同一颜色的原因。
柔和 UI 适合什么颜色？
浅色、略低饱和的颜色（明度约 85–95%）效果最好，因为更亮的高光与更暗的阴影都能保持可见。纯白会吃掉高光，纯黑会吃掉阴影。强度滑杆控制两种色调相对基础色的偏离程度。
凹陷和凸起有什么区别？
两者都在双阴影之上叠加细腻的线性渐变填充。凸起朝向观察者鼓出（朝光源方向更亮），像凸起的按钮；凹陷向内弯曲，像浅碟——适合凹槽与输入框。按压则改用内阴影，表示激活/按下状态。
新拟态的可访问性如何？
柔和 UI 天然低对比，建议用于装饰性容器而非关键控件。请确保文字与图标满足 WCAG 对比度要求，并为可交互元素添加焦点描边。
明暗阴影颜色是如何计算的？
生成器把基础色向白色方向提亮得到高光、向黑色方向压暗得到阴影，幅度由强度滑杆控制。这让两种色调保持在同一色相家族中，正是柔和自然观感的关键。