新拟态（soft UI）CSS 生成器

新拟态（soft UI）CSS 生成器: 用途

新拟态（soft UI）让按钮和卡片看起来像在背景上塑造出来的，一边是浅色阴影，另一边是深色阴影。

选择颜色，生成器会据此计算两个阴影，并可设置大小、圆角、距离、模糊、强度和光线方向。有四种形状：平面、凹面和凸面（带细微渐变）以及按下（内阴影）。页面还会说明对比度方面的注意事项，这是该风格的弱点。

使用方法

1. 选择背景色。
2. 调整距离、模糊、强度和光线。
3. 选择形状并复制 CSS。

使用场景

• 面板中的按钮和卡片。
• 播放器或应用的控件。
• 落地页上的装饰细节。

常见问题

新拟态是如何工作的？

元素与背景颜色相同，并带有两个阴影：光线来向一侧的较亮阴影，和另一侧的较暗阴影。这就产生了立体感，仿佛元素是在背景本身上塑造出来的。

新拟态无障碍吗？

需要谨慎。由于元素与背景同色，它的边缘对比度很低，视力较弱的人可能看不见。建议用于装饰细节和卡片，确保文字和图标的对比度，不要只靠立体感来表明某物是按钮。

在深色背景上能用吗？

可以，但效果会更微弱。颜色过深或过浅时，极端一侧的阴影几乎看不出来；中间色调的效果最明显。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具