免费在线新拟态Neumorphism CSS生成器，可视化调整阴影、圆角、颜色等参数，一键复制CSS代码。纯前端工具，即时预览效果。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用可视化生成 Neumorphism 阴影效果 - 一键复制CSS代码
⚙️ 参数配置
10px
20px
40px
Neumorphism
调整参数自动生成...
常见问题
Q1: 什么是新拟态（Neumorphism）？
新拟态是一种UI设计风格，通过柔和的背景色和双阴影（亮阴影+暗阴影）营造元素从背景中"浮起"或"压入"的视觉效果。它在浅色主题中表现最佳。
Q2: 如何选择合适的背景色？
背景色和元素色应该相近但略有差异。推荐使用柔和的灰白色系（如#e8ecf1）。太鲜艳的颜色会让新拟态效果变弱。建议保持元素色与背景色一致。
Q3: 凸起和凹陷有什么区别？
凸起（raised）元素看起来浮在背景之上，适合卡片和按钮的正常状态。凹陷（pressed）元素看起来被压入背景，适合按钮的按下/激活状态。
新拟态CSS生成器的计算逻辑
本工具的核心计算逻辑：
darkRgb= adjustBrightness(elemRgb, -30), lightRgb = adjustBrightness(elemRgb, 30)
背景色：等参数详解
- 背景色：
- 元素色：
- 阴影距离：
- 模糊半径：
- 圆角：
- 样式：
- CSS代码：