免费的渐变背景CSS3样式

GitHub

你经常为你的UI寻找好看的背景渐变吗？

一个集合180种免费的线性渐变网站，可在任何网站使用
您不仅可以复制渐变的原生CSS颜色代码，还可以查看下载每个优质的渐变图片。

001 温暖的火焰Get .PNG

#ff9a9e→#fad0c4

background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

🍰
完成！

002 褪色的夕阳Get .PNG

#a18cd1→#fbc2eb

background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);

💎
nice！

003 春天的温暖Get .PNG

#fad0c4→#fad0c4

background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);

👊
对了！

004 美味的水蜜桃Get .PNG

#ffecd2→#fcb69f

background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);

👊
完成！

005 年轻的激情Get .PNG

Many colors

background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);

🦄
对了！

006 女士的嘴唇Get .PNG

#ff9a9e→#fecfef

background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);

👊
成功！

007 阳光明媚的早晨Get .PNG

#f6d365→#fda085

background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);

👍
nice！

008 夕阳下的雨Get .PNG

#fbc2eb→#a6c1ee

background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);

☕
对了！

009 梦想被冷冻Get .PNG

#fdcbf1→#e6dee9

background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);

🍬
真棒！

010 冬季的哈尔滨湖Get .PNG

#a1c4fd→#c2e9fb

background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

💪
真棒！

011 尘埃的草Get .PNG

#d4fc79→#96e6a1

background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

🐯
做的好!

012 诱人的蔚蓝Get .PNG

#84fab0→#8fd3f4

background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

💝
恭喜！

013 大雨滂沱Get .PNG

#cfd9df→#e2ebf0

background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);

🤘
恭喜！

014 我心爱的人Get .PNG

#a6c0fe→#f68084

background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);

👌
nice！

015 结出的果实Get .PNG

#fccb90→#d57eeb

background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);

🍭
成功！

016 深蓝色Get .PNG

#e0c3fc→#8ec5fc

background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);

🦄
做的好!

017 成熟的女性Get .PNG

#f093fb→#f5576c

background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);

🥂
完成！

018 多云的深圳Get .PNG

#fdfbfb→#ebedee

background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);

🤘
完成！

019 三亚的海滩Get .PNG

#4facfe→#00f2fe

background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);

🚀
完成！

020 新的生活Get .PNG

#43e97b→#38f9d7

background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);

💗
成功！

021 已是近黄昏Get .PNG

#fa709a→#fee140

background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);

💗
完成！

022 入睡的简室Get .PNG

#30cfd0→#330867

background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);

👌
真棒！

023 罕见的风力Get .PNG

#a8edea→#fed6e3

background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);

🏌
nice！

024 近水楼台先得月Get .PNG

#5ee7df→#b490ca

background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);

🐯
真棒！

025 野外的苹果Get .PNG

#d299c2→#fef9d7

background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);

✌
做的好!

026 上海的外滩Get .PNG

#f5f7fa→#c3cfe2

background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

🐯
成功！

027 厦门的微笑Get .PNG

Many colors

background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);

👍
nice！

028 紫色的盘子Get .PNG

#667eea→#764ba2

background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

🚀
完成！

029 基业长青的天空Get .PNG

#fdfcfb→#e2d1c3

background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);

💎
对了！

030 快乐的渔夫Get .PNG

#89f7fe→#66a6ff

background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);

️
做的好!

031 对你的祝福Get .PNG

#fddb92→#d1fdff

background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);

👌
真棒！

032 鹰的漂亮眼睛Get .PNG

#9890e3→#b1f4cf

background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);

🤘
nice！

033 九寨沟的湖底Get .PNG

#ebc0fd→#d9ded8

background-image: linear-gradient(to top, #ebc0fd 0%, #d9ded8 100%);

💝
恭喜！

034 熟还是不熟的柠檬Get .PNG

#96fbc4→#f9f586

background-image: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);

🍭
做的好!

035 天地相接Get .PNG

#2af598→#009efd

background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);

💥
恭喜！

036 李白的奇迹Get .PNG

#cd9cf2→#f6f3ff

background-image: linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%);

🎂
nice！

037 旧式的Get .PNG

Many colors

background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);

💪
做的好!

038 高级葡萄酒Get .PNG

Many colors

background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);

🏇
nice！

039 深蓝的海Get .PNG

#6a11cb→#2575fc

background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);

️
恭喜！

040 致命的一击Get .PNG

Many colors

background-color: #DCD9D4; 
 background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%); 
 background-blend-mode: soft-light,screen;

👊
对了！

041 酸酸甜甜就是我Get .PNG

#37ecba→#72afd3

background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);

👌
恭喜！

042 悲伤的松树Get .PNG

#ebbba7→#cfc7f8

background-image: linear-gradient(to top, #ebbba7 0%, #cfc7f8 100%);

️
对了！

043 青岛的美美哒Get .PNG

#fff1eb→#ace0f9

background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);

🥂
完成！

044 害羞的彩虹Get .PNG

Many colors

background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);

☕
真棒！

045 山脊里的洞Get .PNG

Many colors

background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
 background-blend-mode: multiply,multiply;

👌
真棒！

046 很多的希望Get .PNG

#c471f5→#fa71cd

background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);

🐯
做的好!

047 我要飞的更高Get .PNG

#48c6ef→#6f86d6

background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);

👏
真棒！

048 强烈的幸福来袭Get .PNG

Many colors

background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);

🍻
成功！

049 未成熟的果实Get .PNG

#feada6→#f5efef

background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);

🌈
真棒！

050 北方大雪纷飞Get .PNG

#e6e9f0→#eef1f5

background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);

🍻
恭喜！

051 淡淡的水墨丹青Get .PNG

#accbee→#e7f0fd

background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);

👌
完成！

052 仁慈而又坚强Get .PNG

#e9defa→#fbfcdb

background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);

💫
恭喜！

053 柔软的小嫩草Get .PNG

#c1dfc4→#deecdd

background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);

️
nice！

054 浓郁的树叶Get .PNG

#0ba360→#3cba92

background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);

💪
完成！

055 百度的蓝色Get .PNG

#00c6fb→#005bea

background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);

🥂
完成！

056 阴凉的水Get .PNG

#74ebd5→#9face6

background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);

💫
完成！

057 这个妆画的挫Get .PNG

#6a85b6→#bac8e0

background-image: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%);

🍻
完成！

058 大鲸鱼Get .PNG

#a3bded→#6991c7

background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);

🍬
真棒！

059 少年的笔记Get .PNG

#9795f0→#fbc8d4

background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);

👌
恭喜！

060 善意的谎言Get .PNG

#a7a6cb→#8989ba

background-image: linear-gradient(to top, #a7a6cb 0%, #8989ba 52%, #8989ba 100%);

💫
完成！

共3页,180个

GitHub 你经常为你的UI寻找好看的背景渐变吗？ 一个集合180种免费的线性渐变网站，可在任何网站使用您不仅可以复制渐变的原生CSS颜色代码，还可以查看下载每个优质的渐变图片。

GitHub

你经常为你的UI寻找好看的背景渐变吗？

一个集合180种免费的线性渐变网站，可在任何网站使用
您不仅可以复制渐变的原生CSS颜色代码，还可以查看下载每个优质的渐变图片。