返回免费在线工具集合

新拟态效果生成器

一键生成新拟态(Neumorphism)风格的凸起、凹陷、扁平按钮,可调圆角与阴影强度。

设计 独立定制 输出:网页 免费使用 发布时间: 阅读量:5 作者:马慧
正在加载工具…

先定鼓还是陷

"河西拟态实验室"的江屿,要一块和背景融在一起又明显鼓出来的软按钮。"效果"下拉选"凸起",另外两个选项是"凹陷"与"扁平";"底色"定 #e8ecf3,它同时决定按钮颜色与后面两条阴影的深浅。这个值会实时拼进 background: #e8ecf3;。

效果选「凸起」

两色由底色算出来

"圆角"调到 24 落成 border-radius: 24px;,"阴影距离"调到 10 落成双阴影里的 10px 与 -10px。明暗两色经 shade(base, 28) 与 shade(base, -28) 算出 #ccd0d7 和 #ffffff。面板上没有强度、模糊、对比度滑块,动完这两个数值结果就定死了。

圆角 24、阴影距离 10

三行里第三行最长

框里实测三行:background: #e8ecf3;、border-radius: 24px;、box-shadow: 10px 10px 20px #ccd0d7, -10px -10px 20px #ffffff;。一明一暗那对阴影对应距离 10,右下暗、左上亮。.zab-result 是空的,别去那儿翻。

看「复制 CSS」框里的双阴影

预览按底色重画

render() 只同步改舞台与按钮的背景色,把三行描述的样子画到按钮上。江屿确认浅灰蓝底、24px 大圆角、右下暗影左上亮影都对,点按钮把三行带走,按钮上会短暂显示"已复制"。没有下载按钮,也不依赖网络。

看预览按钮的立体效果

企业知识网( www.qiyezhishi.com )提供的结果为参考性内容,不构成法律、税务或投资建议。具体请以主管部门口径与最新法规为准。

本文作者

马慧,企业知识网站长,10年+SEO/GEO经验,精通白帽SEO与网站优化,擅长全网营销与短视频引流,曾打造日均万IP的SEO博客(小小课堂网)、十万IP泛流量资讯网站(错误博客)。自川来熟食连锁店长,5年熟食生产与管理经验,精通抖音本地生活服务运营。