打造柔性 UI 阴影的新拟态 CSS 生成器
这款新拟态 CSS 生成器以可视化方式构建柔性 UI 阴影效果，让你再也不用手写那两层 box-shadow。选一个基础颜色、挑一种形状、拖几下滑块，就能复制可直接上线的 CSS。它专为想做新拟态卡片、按钮和输入框，又不想反复试错改代码的设计师和前端开发者而生。
新拟态（也叫柔性 UI / Soft UI）用两层阴影——一亮一暗——让元素看起来像是从同一个表面凸起或被按进表面里。生成器会根据你的基础颜色自动推算出相匹配的阴影颜色，并随着你的调整实时显示预览和准确的 CSS。
如何使用新拟态生成器
选择基础颜色
用取色器设置背景，或直接输入十六进制色值。浅而中性的色调（比如各种灰色）效果最好，因为它能为亮、暗两层阴影都留出足够空间。
选择形状类型
在凸起、按下、内凹和外凸之间切换。凸起用于悬浮卡片，按下用于激活态或点击态。
调整阴影
调节距离（0–50px）、模糊（0–100px）、强度（0–100%）、圆角（0–100px）和预览尺寸（80–400px）。每个滑块都配有一个数值输入框，方便填入精确值。
设置光源方向
选择虚拟光线的来向——左上、右上、左下或右下。它决定了哪一侧出现亮阴影、哪一侧出现暗阴影。左上是最自然的选择。
复制 CSS
点击复制 CSS，把输出粘贴到你的样式表里。别忘了给父容器设置相同的基础颜色，新拟态的视觉错觉才能成立。
功能特性
基础颜色与自动阴影
用取色器或十六进制输入挑选基础颜色，亮、暗两层阴影的颜色会自动推算，得到自然又协调的效果。
四种形状类型
可制作凸起、按下（inset）、内凹（向内渐变）和外凸（向外渐变）效果，并能即时切换对比。
精细的阴影控件
用滑块精细调节距离、模糊和强度，每个滑块都配有同步的数值输入框以填入精确值。
圆角与尺寸控件
圆角最高可设到 100px，预览元素可在 80 到 400px 之间调整大小，按你需要的尺度查看效果。
光源方向控制
可从四个光源方向中选择，阴影偏移和渐变角度会自动随之调整以保持匹配。
多种元素预览
在卡片、按钮、圆形或输入框上预览效果，看看它在不同 UI 场景中的呈现。
深色背景预览
打开深色预览，在更深的表面上检查设计；画面会重新计算，而导出的 CSS 仍保留你原本的颜色。
六个快速起步预设
从轻微、中等、强烈、按下、内凹或外凸起步，再用滑块细化。
实时 CSS 与一键复制
生成的 background 和 box-shadow CSS 实时更新，点一下即可复制。
常见问题
什么是新拟态（柔性 UI）？
新拟态（Neumorphism），也叫柔性 UI / Soft UI，是一种把平面表面与细腻的双层阴影结合起来的设计风格，让元素看起来像是从同一个背景凸起或被按进去。它用一亮一暗两层阴影来模拟柔和、逼真的立体感。
生成器为什么用两层 box-shadow（亮 + 暗）？
单层阴影只能让一侧变暗。新拟态需要在朝向光源的一侧放一层亮阴影，在对侧放一层暗阴影，元素才会显得从表面凸起。生成器会把这两层阴影一起写进同一条 box-shadow 声明里，替你搞定。
为什么我的新拟态效果看起来不对？
最常见的原因是元素和它的父级背景不一致。新拟态要求两者是同一种颜色，所以请把生成的背景颜色同时应用到元素和它的父容器上。
哪些颜色最适合做新拟态？
中性的中间色调效果最好——比如 #e0e0e0 这类浅灰，或柔和的马卡龙色。过深或过浅的颜色会缩小亮、暗两层阴影之间的对比，让效果难以看清，所以要避开纯白和纯黑。
怎么做出按下（inset）的新拟态效果？
选择按下形状类型。它会把 box-shadow 切换为 inset，让元素看起来被压进表面——非常适合激活、聚焦或点击态。按下预设可以给你一个现成的起点。
内凹和外凸有什么区别？
内凹加入一道由暗到亮的渐变，营造向内凹陷的错觉；外凸则由亮到暗，营造向外鼓起的错觉。两者都保留了与凸起相同的双层凸起阴影。
深色预览会改变 CSS 输出吗？
不会。深色预览仅用于查看效果——生成的 CSS 始终反映你原本的基础颜色。要为深色主题生成 CSS，请把基础颜色本身改成深色调。
新拟态和玻璃拟态、拟物化有什么不同？
新拟态在单一平面上用一对匹配的阴影营造柔和立体感。玻璃拟态靠背景模糊和半透明做出磨砂玻璃的观感，而拟物化则模仿现实世界的纹理和材质。新拟态是介于两者之间、极简且单色的折中风格。
新拟态在无障碍方面友好吗？
新拟态天生对比度偏低，所以主要用于装饰性容器，而非关键的交互控件。新拟态表面上的文字要保持足够的对比度，并为按钮和输入框补上清晰的标签、聚焦样式和边框。
这些 CSS 能用在任何框架里吗？
可以。输出使用的是标准的 background、box-shadow 和 border-radius 属性，能配合 Tailwind、Bootstrap 或纯 CSS 使用——直接把它们应用到你的元素上即可。
还没有评论，快来发表第一条！