Neumorphism（或软UI）已经成为网页设计的一大趋势。它创造出美丽的挤压塑料外观，给人一种非常优质和现代的感觉。
然而，从头开始编写 Neumorphic 按钮是一件非常令人头疼的事情。
阴影背后的数学
一个完美的 Neumorphic 按钮需要两个完美平衡的盒子阴影： 1. 左上角的光阴影模拟光源。 2. 右下角的黑色阴影用于模拟深度。
如果对比度太高，看起来会很刺眼。如果太低，按钮就会消失在背景中。
````CSS / 经典的Neumorphism公式 / 背景：#e0e5ec； 盒子阴影：9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5); ````
更快的方法
您可以使用我们的 [CSS 按钮生成器](/en/css-button-generator)，而不是在 DevTools 中花几个小时调整 CSS 值。
我们的工具可让您直观地调整所需的精确边框半径、颜色和阴影强度。一旦它在屏幕上看起来很完美，您只需单击“复制 CSS”并将其放入您的 React 组件或样式表中。
停止编写原始 CSS 阴影并开始以可视方式生成它们！