gradex
gradex 是一个基于 grade-js 库的在线工具，能够从上传的图片中提取两种主色并生成互补渐变背景，支持下载背景图片和查看相关 HTML 代码。
• Copy the embed code to showcase this product on your website
• Share on X to spread the word about this amazing tool
在第 61 期的文章中推荐了一个开源的JS库, grade-js, 这个库可以获取图像的2种主色并生成互补渐变的背景, #506 ---基于这个JS库, 我做了一个在线的网站, 支持拖入或者点击上传本地图片, 程序自动读取图片的2个主色, 并设置成全屏的渐变背景色.之后可以点击 [下载] 按钮, 可以下载渐变背景图片, 也可以查看HTML渐变背景的相关代码.比如输入下面这张图片:
生成的背景效果如下图:
点击 [ 下载 ] 按钮之后, 你就可以得到下面这张渐变背景图片:
对应的html背景色的代码如下:html<div style="height: 1080px; background-image: linear-gradient(135deg, rgb(242, 155, 153) 0%, rgb(60, 1, 146) 75%)"></div>项目地址: https://github.com/jwenjian/gradex在线地址: https://jwenjian.github.io/gradex/支持显示为: 中文 / 英文