新拟态 Neumorphism 生成器

通过双向 box-shadow 生成柔和凸起的新拟态 UI 风格，可调背景色、光源方向、距离与模糊

参数控制与预览

调节背景色、大小、圆角与光源方向，右侧实时预览新拟态凸起效果

180 px
30 px
12 px
12 px

光源方向决定哪一侧亮、哪一侧暗

实时预览
新拟态依赖柔和背景色与同色双向阴影，预览区背景会跟随设置同步
CSS 代码
包含 background 与 box-shadow，亮暗阴影按光源方向生成 
/* 调节参数生成 CSS */
广告位

使用说明

  1. 选择背景色（或使用预设色板），背景色决定阴影的亮色与暗色
  2. 调节"方块大小"滑块（100–300 px）
  3. 调节"圆角"滑块（0–50 px），新拟态通常使用较大圆角
  4. 调节"阴影距离"滑块（5–30 px），距离越大凸起感越强
  5. 调节"模糊半径"滑块（5–30 px），模糊越大阴影越柔和
  6. 选择光源方向（左上 / 右上 / 左下 / 右下），决定阴影偏移方向
  7. 右侧预览区背景会跟随背景色同步，便于观察效果
  8. 点击"复制 CSS"将 background 与 box-shadow 代码复制到剪贴板

适用场景

  • 极简 UI：仪表盘、设置面板的卡片使用柔和凸起
  • 按钮设计：为切换按钮、图标按钮生成同色凸起质感
  • 音乐播放器：模仿物理按键的柔和立体感
  • 移动端 APP：iOS / Android 应用中的卡片、控件
  • 仪表盘 / 主题切换：浅色主题下的低对比柔和 UI

安全保障

  • 本地生成：所有 box-shadow 计算在浏览器本地完成
  • 隐私保护：不收集、不存储任何用户操作数据
  • 无网络请求：整个生成过程不发起任何外部请求
  • 免费使用：无需注册登录，打开即用

常见问题

新拟态的 box-shadow 为什么有两层？

新拟态的精髓在于"柔和凸起"：一层是亮色阴影（向光源相反方向偏移），模拟光线照亮的一侧；另一层是暗色阴影（向光源方向偏移），模拟背光面。两层叠加产生立体感，让元素像是从背景中"挤出来"的。

亮色和暗色阴影颜色是怎么计算的？

本工具基于背景色自动派生：暗色 = 背景色按比例加深（约 80% 亮度）；亮色 = 背景色按比例提亮（约 120% 亮度，上限 255）。颜色派生保证与背景色一致，避免色相偏移。

为什么深色背景效果不理想？

新拟态最适合中浅色背景（亮度 60–90 之间）。深色背景中亮色阴影需要更大幅度的提亮才能可见，但容易失去柔和感。若需要在深色背景使用，建议手动调整亮色阴影为更亮的颜色，或改用 Glassmorphism 毛玻璃风格。

新拟态有什么可访问性 (a11y) 注意事项？

新拟态依赖低对比度，可能影响文字可读性。建议：1) 重要文字使用与背景对比度足够的颜色（WCAG AA 标准 4.5:1）；2) 交互元素同时使用边框 / 图标辅助识别；3) 焦点态使用 outline 而非依赖阴影变化；4) 不要将新拟态用于关键操作按钮以避免误识别。