4.1 / 5
- 189 次投票
轻松生成新拟态风格CSS代码
通过简单的参数调整，实时生成精美的新拟态(Neumorphism)风格UI元素的CSS代码，无需手动编写复杂样式。
参数设置
实时预览
按钮示例
使用提示
调整左侧参数可实时查看效果变化，新拟态风格最佳效果通常使用浅色背景。
生成的代码
CSS代码
.neumorphic-element {
width: 200px;
height: 80px;
border-radius: 16px;
background: #f0f4f8;
box-shadow: 10px 10px 20px rgba(163, 177, 198, 0.6),
-10px -10px 20px rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.neumorphic-element:hover {
transform: scale(1.05);
}
已复制!
新拟态风格示例
基础卡片
适用于展示信息的基础卡片样式
交互按钮
带有悬停效果的交互按钮
表单元素
新拟态风格的输入框设计
开关控件
具有切换效果的开关按钮