Skip to main content

【免费】180种渐变色配色方案,一键生成CSS代码-Webgradients

「Webgradients」为设计师提供了UI背景渐变配色,目前共收录了180个渐变配色方案,可轻松生成CSS3代码,复制后即可使用。「Webgradients」还可将渐变方案保存为PNG格式图片,同时还提供了.SKETCH和.PSD格式的文件,方便广大设计师在SKETCH和PS中快速填充渐变色。


访问Webgradients网址:https://webgradients.com/ ,可以看到预设好的多种渐变配色方案。

webgradients
webgradients

点击某个配色方案中的渐变色区域,可以全屏预览该渐变色。

渐变色方案
渐变色预览

渐变色方案左下角包含两个色彩的十六进制颜色编码,可以复制后使用。

渐变色十六进制颜色编码
渐变色十六进制颜色编码

为了方便前端开发,「Webgradients」也提供CSS样式,点击【Copy CSS】按钮后,到编辑器中粘贴即可。

渐变色CSS代码
渐变色CSS代码
应用渐变色CSS代码

如果想要保存渐变色配色方案,可以点击渐变色右上角的【↓】按钮,点击后将会在新窗口打开这个图片,然后鼠标右键“图片另存为”即可。

下载渐变色PNG

「Webgradients」还提供了一个CSS 样式库,可以在项目中直接调用。首先需要先下载一个CSS库:https://github.com/itmeo/webgradients。然后给元素添加class ,class 名称就是渐变色的名,比如“ 011 Dusty Grass ” 对应的 class=”dusty-grass”。

渐变色class名称