什么是拟态设计？
拟态设计（也称为柔和UI）是一种现代设计趋势，它结合了扁平设计和微妙阴影，使元素看起来像是从背景中凸起或压入背景。与传统阴影不同，拟态设计使用两个阴影 — 一个浅色和一个深色 — 来模拟柔和、逼真的深度效果。
这个生成器帮助您在不手写CSS的情况下直观地创建拟态效果。选择基础颜色、选择形状类型、调整阴影参数，然后复制生产就绪的CSS代码。
形状类型详解
平面
按压
凹陷
凸起
使用方法
选择基础颜色
使用颜色选择器选择背景颜色，或直接输入十六进制值。生成器会自动计算匹配的浅色和深色阴影。中性颜色（如灰色）最适合拟态设计。
选择形状类型
从四种形状类型中选择 — 平面、按压、凹陷或凸起。每种类型都会创建不同的视觉深度效果。使用平面表现凸起卡片，使用按压表现活跃/点击状态。
调整阴影参数
- 距离 — 阴影从元素延伸的距离（0–50px）
- 模糊 — 阴影显示的柔和程度（0–100px）
- 强度 — 浅色和深色阴影之间的对比度（0–100%）
- 边框圆角 — 角的圆度（0–100px）
- 尺寸 — 预览元素尺寸（80–400px）
设置光源方向
选择虚拟光源的来源位置。这决定了哪一侧获得浅色阴影，哪一侧获得深色阴影。左上方是最自然且最常用的方向。
复制CSS
点击复制按钮复制生成的CSS代码。将其粘贴到您的样式表中并应用到HTML元素。记住要将父容器的背景设置为相同的基础颜色。
功能特性
可视化阴影控件
使用直观的滑块微调拟态效果，控制距离、模糊、强度、边框圆角和元素尺寸。
- 同步数值输入以获得精确值
- 实时预览更新
- 即时CSS代码生成
四种形状类型
使用多种形状变体创建不同的深度效果。
- 平面（凸起表面）
- 按压（内陷效果）
- 凹陷（向内渐变）
- 凸起（向外渐变）
自动阴影颜色计算
生成器会根据您选择的基础颜色自动推导浅色和深色阴影颜色，确保无论您选择什么颜色，阴影都显得自然和谐。
光源方向控制
从四个光源方向中选择，自动调整阴影偏移和渐变角度。
- 左上方（最自然）
- 右上方
- 左下方
- 右下方
多种元素预览
在不同的UI元素类型上预览拟态效果，以可视化真实应用场景。
- 卡片（正方形容器）
- 按钮（宽矩形）
- 圆形（图标按钮）
- 输入框（文本字段）
深色背景预览
切换深色预览模式查看拟态设计在深色背景上的效果。预览会重新计算阴影颜色，同时保持原始CSS代码不变以供导出。
常见问题
为什么我的拟态效果看起来不对？
最常见的问题是元素的背景颜色与父容器的背景颜色不匹配。拟态设计要求两者必须是相同的颜色。确保将生成的背景颜色应用到元素和其父容器。
什么颜色最适合拟态设计？
中性、中等色调的颜色效果最好 — 浅灰色如#e0e0e0或柔和的淡色。非常深或非常浅的颜色会降低浅色和深色阴影之间的对比度，使效果不太明显。避免使用纯白或纯黑。
凹陷和凸起有什么区别？
凹陷应用从深到浅的渐变（创建向内弯曲的错觉），而凸起从浅到深（创建向外弯曲的错觉）。两者仍然使用与平面相同的凸起阴影效果。
深色预览会改变CSS输出吗？
不会。深色预览仅用于可视化。CSS代码输出始终反映您的原始基础颜色设置。要为深色主题生成CSS，只需将基础颜色更改为深色。
拟态设计是否易于访问？
拟态设计的对比度自然低于传统UI模式。为了实现可访问的设计，主要将其用于装饰性容器而不是交互元素。确保放在拟态表面上的文本具有足够的对比度，并为交互控件结合清晰的标签和边框。
我可以将拟态设计与任何CSS框架一起使用吗？
可以。生成的CSS属性（background、box-shadow、border-radius）是标准CSS，适用于任何框架 — Tailwind、Bootstrap或纯CSS。只需将属性应用到您的元素。
还没有评论，快来发表第一条！