新拟态效果生成器

功能

• 底色可调，两个阴影色由它推出（保持色相，只差明度）
• 偏移距离、模糊半径、强度都可以调
• 凸起与凹陷一键切换 —— 凹陷时两个阴影方向对调
• 圆角可调
• 预览区与元素同色 —— 这是这套效果成立的前提
• 下方给出可复制的完整 CSS 规则，带 `.soft` 选择器
• 参数都做过夹取与色值校验，不产出非法 CSS
• 所有计算在浏览器本地完成，不上传任何东西

使用方法

1. 先选底色：新拟态的效果完全取决于它，浅灰蓝是这套风格的典型选择
2. 调偏移距离与模糊，观察「浮起来」的立体感
3. 调强度控制阴影的浓淡 —— 太浓会让页面变脏
4. 勾上「凹陷」看看按下状态的样子，再点复制拿走 CSS

常见问题

为什么阴影色不让我自己选？

因为挑错一点点，效果就没了。这两个颜色必须满足两个条件：由同一个底色推导出来，而且色相一致 —— 否则看起来不像「同一块材料上打的光」，而像贴了两块颜色不对的补丁。常见的手工做法是「RGB 各加 40」，那会连带改掉色相（在暖色底上尤其明显，加出来是偏白的冷色）。所以这里在 HSL 里只动明度、并同时微调饱和度，色相始终不变，你只需要给一个底色。

这套风格的可访问性到底有多大问题？

问题不小，而且它是这套风格的内生代价，不是实现得不好。 它的美感来自「元素与背景几乎同色」，而可访问性要求的恰好是「元素与背景要有足够对比」—— 两者直接冲突。具体表现：视力不佳或屏幕在强光下的用户，看不出哪些是按钮。可行的补救有三条：关键操作（提交、删除）不要只用新拟态，加边框或明确的文字；给可点的元素留出足够大的点击区域（44×44pt 起）；把「凹陷」状态用在 `:active` 上，让按下时的反馈比静止时更强。

为什么预览区的底色和元素一样？

因为这是整套效果成立的前提：它假定元素与周围是同一块材料，光从左上打过来。周围颜色不一样时，两个阴影的边缘会露馅 —— 看起来像一块贴纸而不是「从那块底上挤出来」。所以这个工具的预览区会跟着底色走，你在真实项目里也要保证元素坐落在与它同色的背景上，否则效果不成立。

凹陷和凸起该用在哪里？

凸起（默认）用于可以点的东西：按钮、卡片、开关的关闭态。凹陷用于两种场合：一是已经按下的状态（`:active`，与凸起形成对比，反馈最自然）；二是往里凹的容器，比如输入框、进度槽 —— 那类元素在语义上本来就是「陷进去」的。本工具一键切换两种状态，可以先看看它们的区别再决定用在哪里。

这套风格适合什么样的项目？

它适合元素少、留白多、信息密度低的界面：设置面板、控制台、播放器、仪表盘这类「几个大按钮加一片空地」的场景。反过来，不适合信息密集的界面 —— 表格、列表、后台管理这类地方本来就靠边框和分隔线来区分层次，而新拟态恰恰取消了边框，结果是所有东西糊在一起。这也是它在 2020 年前后流行一阵之后主要出现在概念稿里的原因。