免费的渐变背景CSS3样式

18 | 19 |

20 | 21 | 32 |

33 | 34 |

35 |

36 |

37 |

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

43 |

44 |

45 |

46 |

47 |

48 |

49 |

50 |

51 | 52 |

53 |

54 |

55 |

56 |

57 | 58 |

59 |

60 | 001 温暖的火焰Get .PNG 61 |

62 |

63 |

64 | #ff9a9e→#fad0c4 65 |

66 | 67 |

68 |

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

69 |

70 |

71 |

72 | 🍰
73 | 完成！ 74 |

75 |

76 |

77 |

78 | 002 褪色的夕阳Get .PNG 79 |

80 |

81 |

82 | #a18cd1→#fbc2eb 83 |

84 | 85 |

86 |

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

87 |

88 |

89 |

90 | 💎
91 | nice！ 92 |

93 |

94 |

95 |

96 | 003 春天的温暖Get .PNG 97 |

98 |

99 |

100 | #fad0c4→#fad0c4 101 |

102 | 103 |

104 |

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

105 |

106 |

107 |

108 | 👊
109 | 对了！ 110 |

111 |

112 |

113 |

114 | 004 美味的水蜜桃Get .PNG 115 |

116 |

117 |

118 | #ffecd2→#fcb69f 119 |

120 | 121 |

122 |

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

123 |

124 |

125 |

126 | 👊
127 | 完成！ 128 |

129 |

130 |

131 |

132 | 005 年轻的激情Get .PNG 133 |

134 |

135 |

136 | Many colors 137 |

138 | 139 |

140 |

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

141 |

142 |

143 |

144 | 🦄
145 | 对了！ 146 |

147 |

148 |

149 |

150 | 006 女士的嘴唇Get .PNG 151 |

152 |

153 |

154 | #ff9a9e→#fecfef 155 |

156 | 157 |

158 |

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

159 |

160 |

161 |

162 | 👊
163 | 成功！ 164 |

165 |

166 |

167 |

168 | 007 阳光明媚的早晨Get .PNG 169 |

170 |

171 |

172 | #f6d365→#fda085 173 |

174 | 175 |

176 |

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

177 |

178 |

179 |

180 | 👍
181 | nice！ 182 |

183 |

184 |

185 |

186 | 008 夕阳下的雨Get .PNG 187 |

188 |

189 |

190 | #fbc2eb→#a6c1ee 191 |

192 | 193 |

194 |

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

195 |

196 |

197 |

198 | ☕
199 | 对了！ 200 |

201 |

202 |

203 |

204 | 009 梦想被冷冻Get .PNG 205 |

206 |

207 |

208 | #fdcbf1→#e6dee9 209 |

210 | 211 |

212 |

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

213 |

214 |

215 |

216 | 🍬
217 | 真棒！ 218 |

219 |

220 |

221 |

222 |

223 |

224 | 010 冬季的哈尔滨湖Get .PNG 225 |

226 |

227 |

228 | #a1c4fd→#c2e9fb 229 |

230 | 231 |

232 |

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

233 |

234 |

235 |

236 | 💪
237 | 真棒！ 238 |

239 |

240 |

241 |

242 | 011 尘埃的草Get .PNG 243 |

244 |

245 |

246 | #d4fc79→#96e6a1 247 |

248 | 249 |

250 |

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

251 |

252 |

253 |

254 | 🐯
255 | 做的好! 256 |

257 |

258 |

259 |

260 | 012 诱人的蔚蓝Get .PNG 261 |

262 |

263 |

264 | #84fab0→#8fd3f4 265 |

266 | 267 |

268 |

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

269 |

270 |

271 |

272 | 💝
273 | 恭喜！ 274 |

275 |

276 |

277 |

278 | 013 大雨滂沱Get .PNG 279 |

280 |

281 |

282 | #cfd9df→#e2ebf0 283 |

284 | 285 |

286 |

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

287 |

288 |

289 |

290 | 🤘
291 | 恭喜！ 292 |

293 |

294 |

295 |

296 | 014 我心爱的人Get .PNG 297 |

298 |

299 |

300 | #a6c0fe→#f68084 301 |

302 | 303 |

304 |

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

305 |

306 |

307 |

308 | 👌
309 | nice！ 310 |

311 |

312 |

313 |

314 | 015 结出的果实Get .PNG 315 |

316 |

317 |

318 | #fccb90→#d57eeb 319 |

320 | 321 |

322 |

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

323 |

324 |

325 |

326 | 🍭
327 | 成功！ 328 |

329 |

330 |

331 |

332 |

333 |

334 | 016 深蓝色Get .PNG 335 |

336 |

337 |

338 | #e0c3fc→#8ec5fc 339 |

340 | 341 |

342 |

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

343 |

344 |

345 |

346 | 🦄
347 | 做的好! 348 |

349 |

350 |

351 |

352 | 017 成熟的女性Get .PNG 353 |

354 |

355 |

356 | #f093fb→#f5576c 357 |

358 | 359 |

360 |

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

361 |

362 |

363 |

364 | 🥂
365 | 完成！ 366 |

367 |

368 |

369 |

370 | 018 多云的深圳Get .PNG 371 |

372 |

373 |

374 | #fdfbfb→#ebedee 375 |

376 | 377 |

378 |

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

379 |

380 |

381 |

382 | 🤘
383 | 完成！ 384 |

385 |

386 |

387 |

388 | 019 三亚的海滩Get .PNG 389 |

390 |

391 |

392 | #4facfe→#00f2fe 393 |

394 | 395 |

396 |

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

397 |

398 |

399 |

400 | 🚀
401 | 完成！ 402 |

403 |

404 |

405 |

406 | 020 新的生活Get .PNG 407 |

408 |

409 |

410 | #43e97b→#38f9d7 411 |

412 | 413 |

414 |

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

415 |

416 |

417 |

418 | 💗
419 | 成功！ 420 |

421 |

422 |

423 |

424 | 021 已是近黄昏Get .PNG 425 |

426 |

427 |

428 | #fa709a→#fee140 429 |

430 | 431 |

432 |

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

433 |

434 |

435 |

436 | 💗
437 | 完成！ 438 |

439 |

440 |

441 |

442 | 022 入睡的简室Get .PNG 443 |

444 |

445 |

446 | #30cfd0→#330867 447 |

448 | 449 |

450 |

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

451 |

452 |

453 |

454 | 👌
455 | 真棒！ 456 |

457 |

458 |

459 |

460 | 023 罕见的风力Get .PNG 461 |

462 |

463 |

464 | #a8edea→#fed6e3 465 |

466 | 467 |

468 |

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

469 |

470 |

471 |

472 | 🏌
473 | nice！ 474 |

475 |

476 |

477 |

478 | 024 近水楼台先得月Get .PNG 479 |

480 |

481 |

482 | #5ee7df→#b490ca 483 |

484 | 485 |

486 |

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

487 |

488 |

489 |

490 | 🐯
491 | 真棒！ 492 |

493 |

494 |

495 |

496 | 025 野外的苹果Get .PNG 497 |

498 |

499 |

500 | #d299c2→#fef9d7 501 |

502 | 503 |

504 |

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

505 |

506 |

507 |

508 | ✌
509 | 做的好! 510 |

511 |

512 |

513 |

514 | 026 上海的外滩Get .PNG 515 |

516 |

517 |

518 | #f5f7fa→#c3cfe2 519 |

520 | 521 |

522 |

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

523 |

524 |

525 |

526 | 🐯
527 | 成功！ 528 |

529 |

530 |

531 |

532 | 027 厦门的微笑Get .PNG 533 |

534 |

535 |

536 | Many colors 537 |

538 | 539 |

540 |

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

541 |

542 |

543 |

544 | 👍
545 | nice！ 546 |

547 |

548 |

549 |

550 | 028 紫色的盘子Get .PNG 551 |

552 |

553 |

554 | #667eea→#764ba2 555 |

556 | 557 |

558 |

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

559 |

560 |

561 |

562 | 🚀
563 | 完成！ 564 |

565 |

566 |

567 |

568 | 029 基业长青的天空Get .PNG 569 |

570 |

571 |

572 | #fdfcfb→#e2d1c3 573 |

574 | 575 |

576 |

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

577 |

578 |

579 |

580 | 💎
581 | 对了！ 582 |

583 |

584 |

585 |

586 | 030 快乐的渔夫Get .PNG 587 |

588 |

589 |

590 | #89f7fe→#66a6ff 591 |

592 | 593 |

594 |

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

595 |

596 |

597 |

598 | ️
599 | 做的好! 600 |

601 |

602 |

603 |

604 | 031 对你的祝福Get .PNG 605 |

606 |

607 |

608 | #fddb92→#d1fdff 609 |

610 | 611 |

612 |

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

613 |

614 |

615 |

616 | 👌
617 | 真棒！ 618 |

619 |

620 |

621 |

622 | 032 鹰的漂亮眼睛Get .PNG 623 |

624 |

625 |

626 | #9890e3→#b1f4cf 627 |

628 | 629 |

630 |

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

631 |

632 |

633 |

634 | 🤘
635 | nice！ 636 |

637 |

638 |

639 |

640 | 033 九寨沟的湖底Get .PNG 641 |

642 |

643 |

644 | #ebc0fd→#d9ded8 645 |

646 | 647 |

648 |

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

649 |

650 |

651 |

652 | 💝
653 | 恭喜！ 654 |

655 |

656 |

657 |

658 | 034 熟还是不熟的柠檬Get .PNG 659 |

660 |

661 |

662 | #96fbc4→#f9f586 663 |

664 | 665 |

666 |

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

667 |

668 |

669 |

670 | 🍭
671 | 做的好! 672 |

673 |

674 |

675 |

676 | 035 天地相接Get .PNG 677 |

678 |

679 |

680 | #2af598→#009efd 681 |

682 | 683 |

684 |

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

685 |

686 |

687 |

688 | 💥
689 | 恭喜！ 690 |

691 |

692 |

693 |

694 | 036 李白的奇迹Get .PNG 695 |

696 |

697 |

698 | #cd9cf2→#f6f3ff 699 |

700 | 701 |

702 |

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

703 |

704 |

705 |

706 | 🎂
707 | nice！ 708 |

709 |

710 |

711 |

712 | 037 旧式的Get .PNG 713 |

714 |

715 |

716 | Many colors 717 |

718 | 719 |

720 |

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

721 |

722 |

723 |

724 | 💪
725 | 做的好! 726 |

727 |

728 |

729 |

730 | 038 高级葡萄酒Get .PNG 731 |

732 |

733 |

734 | Many colors 735 |

736 | 737 |

738 |

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

739 |

740 |

741 |

742 | 🏇
743 | nice！ 744 |

745 |

746 |

747 |

748 | 039 深蓝的海Get .PNG 749 |

750 |

751 |

752 | #6a11cb→#2575fc 753 |

754 | 755 |

756 |

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

757 |

758 |

759 |

760 | ️
761 | 恭喜！ 762 |

763 |

764 |

765 |

766 | 040 致命的一击Get .PNG 767 |

768 |

769 |

770 | Many colors 771 |

772 | 773 |

774 |

background-color: #DCD9D4; 
 775 |  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%); 
 776 |  background-blend-mode: soft-light,screen;
 777 |

778 |

779 |

780 |

781 | 👊
782 | 对了！ 783 |

784 |

785 |

786 |

787 | 041 酸酸甜甜就是我Get .PNG 788 |

789 |

790 |

791 | #37ecba→#72afd3 792 |

793 | 794 |

795 |

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

796 |

797 |

798 |

799 | 👌
800 | 恭喜！ 801 |

802 |

803 |

804 |

805 | 042 悲伤的松树Get .PNG 806 |

807 |

808 |

809 | #ebbba7→#cfc7f8 810 |

811 | 812 |

813 |

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

814 |

815 |

816 |

817 | ️
818 | 对了！ 819 |

820 |

821 |

822 |

823 | 043 青岛的美美哒Get .PNG 824 |

825 |

826 |

827 | #fff1eb→#ace0f9 828 |

829 | 830 |

831 |

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

832 |

833 |

834 |

835 | 🥂
836 | 完成！ 837 |

838 |

839 |

840 |

841 | 044 害羞的彩虹Get .PNG 842 |

843 |

844 |

845 | Many colors 846 |

847 | 848 |

849 |

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

850 |

851 |

852 |

853 | ☕
854 | 真棒！ 855 |

856 |

857 |

858 |

859 | 045 山脊里的洞Get .PNG 860 |

861 |

862 |

863 | Many colors 864 |

865 | 866 |

867 |

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; 
 868 |  background-blend-mode: multiply,multiply;
 869 |

870 |

871 |

872 |

873 | 👌
874 | 真棒！ 875 |

876 |

877 |

878 |

879 | 046 很多的希望Get .PNG 880 |

881 |

882 |

883 | #c471f5→#fa71cd 884 |

885 | 886 |

887 |

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

888 |

889 |

890 |

891 | 🐯
892 | 做的好! 893 |

894 |

895 |

896 |

897 | 047 我要飞的更高Get .PNG 898 |

899 |

900 |

901 | #48c6ef→#6f86d6 902 |

903 | 904 |

905 |

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

906 |

907 |

908 |

909 | 👏
910 | 真棒！ 911 |

912 |

913 |

914 |

915 | 048 强烈的幸福来袭Get .PNG 916 |

917 |

918 |

919 | Many colors 920 |

921 | 922 |

923 |

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

924 |

925 |

926 |

927 | 🍻
928 | 成功！ 929 |

930 |

931 |

932 |

933 | 049 未成熟的果实Get .PNG 934 |

935 |

936 |

937 | #feada6→#f5efef 938 |

939 | 940 |

941 |

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

942 |

943 |

944 |

945 | 🌈
946 | 真棒！ 947 |

948 |

949 |

950 |

951 | 050 北方大雪纷飞Get .PNG 952 |

953 |

954 |

955 | #e6e9f0→#eef1f5 956 |

957 | 958 |

959 |

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

960 |

961 |

962 |

963 | 🍻
964 | 恭喜！ 965 |

966 |

967 |

968 |

969 | 051 淡淡的水墨丹青Get .PNG 970 |

971 |

972 |

973 | #accbee→#e7f0fd 974 |

975 | 976 |

977 |

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

978 |

979 |

980 |

981 | 👌
982 | 完成！ 983 |

984 |

985 |

986 |

987 | 052 仁慈而又坚强Get .PNG 988 |

989 |

990 |

991 | #e9defa→#fbfcdb 992 |

993 | 994 |

995 |

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

996 |

997 |

998 |

999 | 💫
1000 | 恭喜！ 1001 |

1002 |

1003 |

1004 |

1005 | 053 柔软的小嫩草Get .PNG 1006 |

1007 |

1008 |

1009 | #c1dfc4→#deecdd 1010 |

1011 | 1012 |

1013 |

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

1014 |

1015 |

1016 |

1017 | ️
1018 | nice！ 1019 |

1020 |

1021 |

1022 |

1023 | 054 浓郁的树叶Get .PNG 1024 |

1025 |

1026 |

1027 | #0ba360→#3cba92 1028 |

1029 | 1030 |

1031 |

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

1032 |

1033 |

1034 |

1035 | 💪
1036 | 完成！ 1037 |

1038 |

1039 |

1040 |

1041 | 055 百度的蓝色Get .PNG 1042 |

1043 |

1044 |

1045 | #00c6fb→#005bea 1046 |

1047 | 1048 |

1049 |

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

1050 |

1051 |

1052 |

1053 | 🥂
1054 | 完成！ 1055 |

1056 |

1057 |

1058 |

1059 | 056 阴凉的水Get .PNG 1060 |

1061 |

1062 |

1063 | #74ebd5→#9face6 1064 |

1065 | 1066 |

1067 |

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

1068 |

1069 |

1070 |

1071 | 💫
1072 | 完成！ 1073 |

1074 |

1075 |

1076 |

1077 | 057 这个妆画的挫Get .PNG 1078 |

1079 |

1080 |

1081 | #6a85b6→#bac8e0 1082 |

1083 | 1084 |

1085 |

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

1086 |

1087 |

1088 |

1089 | 🍻
1090 | 完成！ 1091 |

1092 |

1093 |

1094 |

1095 | 058 大鲸鱼Get .PNG 1096 |

1097 |

1098 |

1099 | #a3bded→#6991c7 1100 |

1101 | 1102 |

1103 |

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

1104 |

1105 |

1106 |

1107 | 🍬
1108 | 真棒！ 1109 |

1110 |

1111 |

1112 |

1113 | 059 少年的笔记Get .PNG 1114 |

1115 |

1116 |

1117 | #9795f0→#fbc8d4 1118 |

1119 | 1120 |

1121 |

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

1122 |

1123 |

1124 |

1125 | 👌
1126 | 恭喜！ 1127 |

1128 |

1129 |

1130 |

1131 | 060 善意的谎言Get .PNG 1132 |

1133 |

1134 |

1135 | #a7a6cb→#8989ba 1136 |

1137 | 1138 |

1139 |

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

1140 |

1141 |

1142 |

1143 | 💫
1144 | 完成！ 1145 |

1146 |

1147 |

1148 | 1149 |

1150 |

1155 | 共3页,180个 1156 |

1157 | 1158 |

1159 |

1160 |

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

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