# 新拟态生成器使用教程：拖滑杆做出凸起/凹陷效果，一键复制 Neumorphism CSS

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/neumorphism-generator-guide

## 工具简介

**新拟态生成器**是工具派推出的一款可视化 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% |

## 使用步骤

1. **打开工具页面**：左侧是参数调节区（快速预设、形状、颜色、各滑杆），右侧上方是实时预览区、下方是生成的 CSS 代码，无需登录即可使用。

![新拟态生成器主界面：左侧为参数调节区，含快速预设、形状切换（凸起/凹陷/扁平）、背景色与深色模式、颜色预设、光源角度及尺](article/202607/1783967164058_3961.png)

2. **选择形状模式**：点击「凸起 / 凹陷 / 扁平」三个按钮之一。凸起效果下，方块沿光源方向投射暗阴影、反方向投射亮阴影，看起来像从背景中浮起；凹陷则改用 `inset` 内阴影并叠加一道由暗到亮的线性渐变，看起来像被按压下去；扁平直接移除阴影，适合做对照。

3. **确定背景色**：新拟态要求元素与背景同色，因此只需设置一个「背景色」——用取色器挑选、在文本框输入十六进制值，或直接点 9 个颜色预设之一。做深色风格时勾选「深色模式」即可一键切到 `#2d3748`。

4. **调节光影参数**：先定「光源角度」（经典的 145° 表示光从左上方来），再调「距离」控制阴影偏移、「模糊」控制柔和度、「强度」控制明暗对比。强度由背景色自动加亮/变暗推算出两道阴影色，百分比越高，立体感越强但也越容易显得脏。

5. **套用快速预设（可选）**：不想从零调时，直接点预设按钮——「Soft」是浅色凸起，「Pressed」是浅色凹陷，「Dark Soft / Dark Pressed」是深色系的凸起与凹陷，「Flat」则是无阴影的扁平对照。套用后仍可继续微调任意参数。

6. **调整预览与圆角（可选）**：「尺寸」和「圆角」只影响预览方块的观感（圆角会写入输出代码），可以把圆角调到接近尺寸一半，验证胶囊形、大圆角卡片等真实场景下的效果。

7. **复制代码使用**：确认效果后，在代码区右上角点击「复制 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` 三条声明，元素实际尺寸由你自己的布局决定。