新拟态生成器

关于新拟态生成器

新拟态（Neumorphism / Soft UI）通过两个相对的阴影将元素与背景融合 — 一侧为暗阴影，另一侧为亮高光，呈现柔和的塑料质感。本工具让您调节全部相关参数，并即时复制可直接使用的CSS代码。

可控制的属性

• 尺寸与圆角 — 元素大小和角落圆滑度。
• 基础颜色 — 表面与元素共享的背景色。
• 阴影距离 — 阴影偏移的距离。
• 阴影模糊 — 阴影柔和度。
• 亮/暗透明度 — 独立控制每个阴影的强度。
• 样式 — 扁平（凸起）、凹陷或凸面。

使用方法

1. 设置 基础颜色 — 预览区域会自动应用。
2. 调整 尺寸 和 圆角 确定形状。
3. 调节 阴影距离 和 模糊 控制深度。
4. 平衡亮/暗阴影透明度。
5. 选择样式（扁平/凹陷/凸面）并点击 复制 CSS。

常见问题

为什么元素看起来看不见？ 新拟态要求元素背景与后方表面颜色一致。请确保页面背景等于这里设置的 基础颜色。

新拟态是否无障碍友好？ Soft UI 可能影响对比度和无障碍性。建议用于装饰性元素，并使用足够深的文字颜色以满足 WCAG 对比度标准。

可以添加悬停效果吗？ 可以 — 按钮可在 :active 时切换为"凹陷"内阴影，或在 :hover 时增强阴影。