CSS 新拟态生成器

CSS 新拟态生成器 是什么？

CSS 新拟态生成器是一款免费的可视化工具，用于打造 Soft-UI（新拟态）外观——元素通过两道同色调的偏移阴影，看起来像是从表面凸出或被按入其中。它专为想要这种细腻、可触感深度，又不愿手动调试成对 box-shadow 的 UI 设计师和前端开发者打造。用取色器或十六进制字段设置基准色，在「平面」「内凹」「外凸」之间切换形态，并调整「距离」（阴影偏移多远）、「强度」（明暗对比的强弱）、「模糊」（柔和度）和「圆角」。工具会从基准色推导出较亮的高光和较暗的阴影并将二者组合——内凹和外凸形态还可叠加一道细微渐变——合成为单条 CSS 规则，在配套背景上实时显示，并以可复制的代码输出。

如何使用 CSS 新拟态生成器

1. 用色块或输入十六进制值（如 #e0e5ec）来选择表面基准色。
2. 挑选形态：「平面」呈现凸起面板，「内凹」呈现按下的凹槽，「外凸」呈现隆起的鼓包。
3. 设置「距离」，让明暗阴影向外移得更远，获得更深的凸出感。
4. 调整「强度」，使高光/阴影对比更强烈或更含蓄。
5. 调节「模糊」获得更柔或更锐的边缘，调节「圆角」让边角更圆润。
6. 查看实时预览，然后将生成的新拟态 CSS 复制到样式表中。

示例

颜色 #e0e5ec, 形态 平面, 距离 12, 强度 15, 模糊 24, 圆角 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

颜色 #e0e5ec, 形态 内凹, 距离 8, 强度 15, 模糊 16, 圆角 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

颜色 #3a3f47, 形态 外凸, 距离 6, 强度 20, 模糊 12, 圆角 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

常见问题

什么是新拟态？

新拟态（Soft UI）是一种风格，让元素看起来像是从单色表面凸出或被按入其中，使用两道同色调的偏移 box-shadow——左上方较亮、右下方较暗。本工具从你的基准色推导出这两道阴影，因此它们始终与表面相匹配。

平面、内凹和外凸有什么区别？

平面让表面保持单一纯色，元素看起来高出背景。内凹添加一道向左上方变暗的细微渐变，看起来像被挖凹进去。外凸翻转渐变，使中心看起来鼓起隆出。明暗阴影保持不变，改变的只是表面填充。

距离、强度、模糊和圆角是如何工作的？

距离是两道阴影的像素偏移量——值越大，元素离表面越远。强度控制两道阴影色比基准色亮多少和暗多少。模糊柔化阴影边缘，圆角让边角变圆。改变其中任意一项，CSS 都会实时更新。

背景该用什么颜色？

只有当元素位于同一基准色的表面上时，新拟态才能正确呈现——请为父元素或页面背景应用相同颜色。预览以你的基准色作为背景，便于你在复制前准确判断效果。

我的数据会被上传到任何地方吗？

不会。生成器完全在你的浏览器中通过 JavaScript 运行——你的颜色和设置绝不会发送到服务器，因此既能保护隐私，页面加载后甚至还能离线使用。