新拟态 CSS 生成器

构建柔和凸起的界面元素。

新拟态在与背景同色的表面上使用一明一暗两道阴影，让元素看起来柔和凸起。设置背景色、距离、强度和圆角，然后复制 CSS。

表面颜色

距离20px

强度60%

圆角16px

background: #e0e5ec;
border-radius: 16px;
box-shadow: 20px 20px 30px rgba(174, 181, 195, 0.60), -20px -20px 30px rgba(255, 255, 255, 0.60);

如何制作新拟态

为什么元素必须和背景同色？

这种错觉依赖两道阴影与同一表面颜色融合，因此元素和其父级应使用相同的颜色。

浅色和深色模式有什么区别？

深色模式在深色背景上使用细微的白色和黑色阴影，而不是经典的浅灰色外观。

新拟态的无障碍性如何？

请确保文字有足够的对比度，不要仅靠阴影来表示可交互。