新拟态（Neumorphism）CSS 生成器

生成柔和 UI（新拟态）CSS：由基础色推算出亮、暗两层阴影，支持平面、内凹、外凸和按下形状，以及四个光源方向。

新拟态设置

基础色

形状

光源方向

距离px

模糊px

强度

半径px

尺寸px

#ffffff#b0b0b0

明暗阴影由基础色派生：按强度提高或降低其 OKLCH 亮度。页面背景请使用相同颜色。

预览

CSS 代码

border-radius: 50px;
background: #e0e0e0;
box-shadow:
  20px 20px 60px #b0b0b0,
  -20px -20px 60px #ffffff;

什么是新拟态生成器？

生成让元素看起来像是从页面中挤出（或压入）的柔和 UI 效果。它根据你的基础色推算出一个更亮和一个更暗的阴影颜色，把它们组合成两个方向相反的 box-shadow，并可为内凹和外凸表面添加渐变填充。

如何使用新拟态生成器

输入“基础色”（页面背景请使用同一种颜色）。
选择“形状”：平面、内凹、外凸或按下。
选择“光源方向”。
调整“距离”“模糊”“强度”“半径”和预览“尺寸”。
复制 CSS 代码。

示例

输入

Base #e0e0e0, flat, light from top left, distance 20px, blur 60px, intensity 0.15, radius 50px

输出

border-radius: 50px;
background: #e0e0e0;
box-shadow:
  20px 20px 60px #b0b0b0,
  -20px -20px 60px #ffffff;

何时使用新拟态生成器

适合活泼的仪表盘、智能家居或音乐应用的控件以及作品集。新拟态天生对比度较低，所以不要只靠它来表现重要的按钮或表单字段；请添加清晰的标签、图标或焦点环以保证无障碍。

新拟态生成器的工作原理

亮、暗阴影颜色在 OKLCH 中计算：按强度提高和降低基础色的明度，同时保持色相和色度（并映射到 sRGB 色域内），因此对彩色和深色基础色同样适用。暗阴影按距离朝远离光源的方向偏移，亮阴影则朝向光源偏移，两者使用相同的模糊。“按下”使用两个 inset 阴影。内凹和外凸会添加一个 linear-gradient，其角度跟随光源方向，所用颜色比强度的三分之一更亮和更暗。