新拟态生成器
免费在线使用 新拟态生成器 无需安装即可使用工具
关于新拟态生成器
新拟态生成器生成被称为新拟态（柔和 UI）的柔软、立体凸出效果。你选择形状——扁平、按压或凸出——并在背景色上调整距离、模糊和圆角，工具会实时构建对应的 box-shadow CSS。预览能准确显示元素的外观，可复制的代码块则持有样式。全部在浏览器本地运行。
使用方法
1. 选择形状：扁平、按压或凸出 2. 设置与界面匹配的背景色 3. 调整距离、模糊和圆角滑块 4. 观察预览实时更新 5. 点击「复制」获取生成的 CSS
最佳效果建议
当元素与背景颜色相同时，新拟态效果最佳，阴影会融合成柔和的 3D 效果——请选择接近页面颜色的背景色。扁平呈凸起外观，按压让元素向内凹陷，凸出则在扁平阴影上添加微妙渐变以获得圆润感。较小的模糊值保持边缘清晰，较大则更柔和。较高的圆角让形状更友好。
▶什么是新拟态？
它是一种设计风格，元素通过柔和且匹配的阴影呈现为从背景中凸出或凹陷。新拟态生成器由两层 box-shadow 和共享的背景色构建这种效果。
▶几种形状有什么区别？
扁平使用外阴影呈凸起外观。按压使用内阴影让元素下陷。凸出在扁平阴影之上添加由浅到深的渐变，呈现圆润感。
▶为什么要匹配背景色？
效果依赖元素与其周围环境共用一种颜色。当颜色匹配时，双重阴影会呈现为平滑的 3D 表面，而非独立的悬浮方块。
▶距离和模糊控制什么？
距离让阴影远离元素，模糊让阴影变柔。更小更紧的值更清晰，更大的模糊则带来更柔和、更漫散的表面。
▶可以复制 CSS 吗？
可以。「复制」按钮会把生成的 background、border-radius 和 box-shadow 规则写入剪贴板，方便粘贴到样式表或样式块中。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。