CSS新拟态生成器介绍
CSS新拟态(neumorphic)生成器是一个可视化工具，帮助您轻松创建和自定义新拟态设计效果。通过直观的参数调整，您可以实时预览新拟态效果，并获取相应的CSS代码。
主要参数说明
- All Size（统一尺寸）：一键同步控制Width和Height，范围50-400px
- Direction（方向）：控制新拟态效果的光影方向，包括右下、左上、右上、左下四个方向
- Background Color（背景色）：设置元素的背景颜色，这是新拟态效果的基础色
- Width（宽度）：控制元素的宽度，范围50-400px
- Height（高度）：控制元素的高度，范围50-400px
- Radius（圆角）：控制元素的圆角大小，范围0-150px
- Distance（距离）：控制阴影偏移距离，范围5-50px，会自动控制Blur值为Distance的2倍
- Intensity（强度）：控制阴影颜色强度，范围0.01-0.6
- Blur（模糊）：控制阴影模糊程度，范围0-100px，通常由Distance自动控制
- Shape（形状）：控制新拟态的形状类型，包括flat、concave、convex、pressed四种效果
使用教程
调整参数：
- 使用滑块或直接输入数值来调整各项参数
- 点击颜色选择器来更改背景颜色
- 选择方向：右下、左上、右上、左下
- 选择形状类型：flat、concave、convex、pressed
实时预览：
- 在”预览”选项卡中查看实时效果
- 调整参数时预览会实时更新
获取代码：
- 切换到”代码”选项卡查看生成的CSS代码
- 点击”复制”按钮将代码复制到剪贴板
- 将代码应用到您的项目中
应用场景
- 为网页元素添加新拟态设计效果
- 创建现代化的UI界面元素
- 制作独特的按钮、卡片等交互组件
- 设计具有立体感的界面元素
