创建现代感十足的新拟态设计
只需拖动滑块调整参数，即可生成完美的新拟态风格CSS代码，轻松应用于您的项目中。
参数设置
形状
16px
200px
200px
阴影
10px
0px
20px
颜色
样式预设
实时预览
新拟态效果
交互效果:
悬停
点击
生成的CSS代码
.border-radius {
border-radius: 16px;
}
.neumorph-effect {
background-color: #F0F2F5;
border-radius: 16px;
box-shadow:
10px 10px 20px rgba(0, 0, 0, 0.1),
-10px -10px 20px rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
}
.neumorph-effect:hover {
box-shadow:
15px 15px 30px rgba(0, 0, 0, 0.15),
-15px -15px 30px rgba(255, 255, 255, 0.8);
}
.neumorph-effect:active {
box-shadow:
inset 3px 3px 6px rgba(0, 0, 0, 0.1),
inset -3px -3px 6px rgba(255, 255, 255, 0.7);
}
使用提示
- 调整左侧面板中的参数，实时预览效果
- 点击"复制代码"按钮，将生成的CSS代码复制到剪贴板
- 使用预设按钮快速应用常见的新拟态样式
- 切换"悬停"和"点击"效果开关，查看不同状态下的样式
- 下载CSS文件或添加到收藏夹，方便后续使用
灵感示例
圆形按钮
适合社交媒体分享或功能按钮
登录按钮
扁平按钮
简约风格的登录或操作按钮
信息卡片
用于展示文章或产品信息