工具简介
新拟态生成器是工具派推出的一款可视化 CSS 辅助工具，专门用来生成新拟态（Neumorphism，又称软拟物）风格的阴影代码。新拟态的核心是「同色系双阴影」：元素与背景使用同一颜色，靠一明一暗两道阴影营造出从背景中「浮起」或「压入」的立体感。手写这种效果要反复调试 box-shadow 的位移、模糊和颜色，非常费时；而在这个工具里，只要拖动滑杆，右侧就能实时预览效果，并自动生成可以直接粘贴到项目里的 CSS，全程在浏览器本地运行，打开即用、无需登录。
功能亮点
- 三种形状模式：「凸起」用外阴影做出浮起效果，「凹陷」用内阴影（
inset）做出按压下去的效果，「扁平」则去掉所有阴影只保留纯色块。 - 六个参数滑杆：光源角度、尺寸、圆角、距离、模糊、强度均可拖动调节，也可以在右侧数字框中精确输入，覆盖新拟态效果的全部关键变量。
- 5 个快速预设：Soft、Pressed、Flat、Dark Soft、Dark Pressed，一键套用浅色/深色、凸起/凹陷的经典组合，适合快速起步。
- 完整的颜色系统：背景色支持取色器和十六进制文本输入，内置 9 个常用颜色预设（含浅色与深色），还有「深色模式」开关一键切换到深色背景
#2d3748。 - 实时预览：右侧预览区以当前背景色铺满，中央的方块即时反映所有调节结果，所见即所得。
- 两种复制方式：「复制 CSS」只带走
.neumorphism类样式，「复制 HTML+CSS」连示例<div>结构一起复制。
参数说明
| 参数 | 说明 | 默认值 / 取值范围 |
|---|---|---|
| 快速预设 | 一键套用常用组合 | Soft、Pressed、Flat、Dark Soft、Dark Pressed |
| 形状 | 阴影形态 | 凸起（默认）/ 凹陷 / 扁平 |
| 背景色 | 预览背景与方块的主色，阴影的明暗两色由它自动推算 | 默认 #e0e5ec，取色器或十六进制输入 |
| 深色模式 | 勾选后背景色自动切换为 #2d3748，取消则回到 #e0e5ec |
默认关闭 |
| 颜色预设 | 9 个常用背景色，点击即用 | 浅色 5 个 + 深色 4 个 |
| 光源角度 | 模拟光线照射方向，决定明暗阴影的方位 | 默认 145°，范围 0–360 |
| 尺寸 | 预览方块的边长，仅影响预览 | 默认 160px，范围 80–300 |
| 圆角 | 方块的 border-radius |
默认 24px，范围 0–150 |
| 距离 | 阴影的偏移距离，越大浮起感越强 | 默认 8px，范围 0–50 |
| 模糊 | 阴影的模糊半径，越大边缘越柔和 | 默认 12px，范围 0–100 |
| 强度 | 阴影明暗色与背景色的差值，越大对比越强 | 默认 15%，范围 0–50% |
使用步骤
- 打开工具页面：左侧是参数调节区（快速预设、形状、颜色、各滑杆），右侧上方是实时预览区、下方是生成的 CSS 代码，无需登录即可使用。
选择形状模式：点击「凸起 / 凹陷 / 扁平」三个按钮之一。凸起效果下，方块沿光源方向投射暗阴影、反方向投射亮阴影，看起来像从背景中浮起；凹陷则改用
inset内阴影并叠加一道由暗到亮的线性渐变，看起来像被按压下去；扁平直接移除阴影，适合做对照。确定背景色：新拟态要求元素与背景同色，因此只需设置一个「背景色」——用取色器挑选、在文本框输入十六进制值，或直接点 9 个颜色预设之一。做深色风格时勾选「深色模式」即可一键切到
#2d3748。调节光影参数：先定「光源角度」（经典的 145° 表示光从左上方来），再调「距离」控制阴影偏移、「模糊」控制柔和度、「强度」控制明暗对比。强度由背景色自动加亮/变暗推算出两道阴影色，百分比越高，立体感越强但也越容易显得脏。
套用快速预设（可选）：不想从零调时，直接点预设按钮——「Soft」是浅色凸起，「Pressed」是浅色凹陷，「Dark Soft / Dark Pressed」是深色系的凸起与凹陷，「Flat」则是无阴影的扁平对照。套用后仍可继续微调任意参数。
调整预览与圆角（可选）：「尺寸」和「圆角」只影响预览方块的观感（圆角会写入输出代码），可以把圆角调到接近尺寸一半，验证胶囊形、大圆角卡片等真实场景下的效果。
复制代码使用：确认效果后，在代码区右上角点击「复制 CSS」得到
.neumorphism { background; border-radius; box-shadow; }三条声明；或点「复制 HTML+CSS」连<div class="neumorphism"></div>示例结构一起带走，粘贴到项目中给元素加上该类即可生效。
使用技巧
- 背景色别太纯：新拟态依赖明暗两道阴影的细微对比，纯白
#ffffff上亮阴影会完全看不见，纯黑上暗阴影也会丢失。浅灰蓝#e0e5ec之所以是经典色，就是因为它给亮暗两侧都留出了发挥空间。 - 145° 是安全角度：光源从左上方来（145°）最符合日常视觉习惯；改角度时建议以 45° 为步进尝试对角线方向，避免 90°、180° 这类正方向导致上下或左右只有单侧阴影、立体感变弱。
- 距离 : 模糊 ≈ 1 : 1.5 更自然：阴影偏移明显大于模糊半径时边缘会发硬，像普通投影；让模糊略大于距离（如 8/12、10/18），边缘过渡才足够柔和。
- 凹陷适合「已按下」状态：按钮的常态用凸起，
:active按下态切换成凹陷（inset），配合过渡动画就能做出逼真的实体按键手感。 - 强度宁低勿高：15% 左右最耐看；超过 30% 后暗阴影会明显发灰发脏，尤其在深色模式下，10–18% 是更稳的区间。
- 记得写过渡动画：工具生成的是静态样式，实际项目中给元素加
transition: box-shadow 0.2s, background 0.2s;，凸起/凹陷状态切换才会顺滑。
常见问题
Q1：生成的 CSS 里为什么有两道 box-shadow？
这正是新拟态的核心：一道是沿光源方向的暗阴影（背景色变暗得到），一道是反方向的亮阴影（背景色变亮得到），两道叠加才形成「从背景里长出来」的立体感，缺一不可。
Q2：「凸起」和「凹陷」的代码有什么区别？
凸起使用普通外阴影，背景是一道由亮到暗的线性渐变；凹陷则把阴影改为 inset 内阴影，背景渐变方向相反（由暗到亮），视觉上就是从表面压下去的效果。
Q3：强度百分比是怎么换算成颜色的？
工具把强度（0–50%）乘以 255 得到偏移量，亮阴影 = 背景色各通道加上该值（封顶 255），暗阴影 = 背景色各通道减去该值（封底 0）。所以强度越高，两道阴影与背景的色差越大。
Q4：为什么换了背景色后效果变弱了？
多半是背景色太接近纯白或纯黑：加亮/变暗时颜色通道会触顶（255）或触底（0），导致一侧阴影消失。换一个中等明度的颜色即可恢复。
Q5：预览区的「尺寸」会写进复制的代码里吗？
不会。尺寸只改变预览方块的大小，帮助你观察效果；输出的 CSS 只包含 background、border-radius 和 box-shadow 三条声明，元素实际尺寸由你自己的布局决定。