CSS 新拟物化（Neumorphism）生成器

新拟物化（“柔和 UI”）让元素的颜色与背景相同，再加上两层阴影：远离光源的一侧是较暗的阴影，朝向光源的一侧是较亮的阴影，于是元素看起来像是从页面中凸出来，或被按进页面里。这个生成器像 neumorphism.io 那样，从您的基础颜色计算出两种阴影颜色，针对任意光源方向写出平面、凹陷、凸起或按下的变体，并在结果对比度太低、不适合用作控件时给出警告。

使用方法

1. 选择基础颜色——元素后面的页面也必须使用它。
2. 设置尺寸、圆角、阴影距离、模糊和强度。
3. 选择形状和光源方向。
4. 复制 CSS；用于按钮或输入框之前，请先看边缘对比度警告。

计算公式

暗色 = 通道 × (1 − 强度) · 亮色 = min(255, 通道 × (1 + 强度)) · box-shadow: d d 模糊 暗色, −d −d 模糊 亮色

d 是距离，正负号取决于光源方向。凹陷和凸起形状会在左上光源时沿 145° 添加从暗 10% 到亮 7% 的渐变（或相反），其他角的光源则镜像处理；按下形状使用 inset 阴影。

示例

对于 #E0E0E0、强度 15%，每个通道 224 × 0.85 = 190.4 → #BEBEBE，224 × 1.15 = 257.6 → 上限 #FFFFFF，得到 box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff。表面与暗部阴影之间的边缘对比度只有 1.4:1，远低于 WCAG 对界面组件要求的 3:1。