Mã màu gradient đẹp và thông dụng

ANHLEVAN'S gởi đến các bạn tổng hợp mã màu gradient đẹp và thông dụng

* Cách copy: Chọn phần cần copy, nhấn Ctrl+C

TT	CSS gradient	Kết quả
01.	background-image: linear-gradient(120deg, #ee9ca7 0%, #ffdde1 100%);
02.	background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d1);
03.	background-image: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
04.	background-image: linear-gradient(to right, #b92b27, #1565c0);
05.	background-image: linear-gradient(to right, #aa4b6b, #6b6b83, #3b8d99);
06.	background-image: linear-gradient(to right, #c31432, #240b36);
07.	background-image: linear-gradient(to right, #f12711, #f5af19);
08.	background-image: linear-gradient(to right, #659999, #f4791f);
09.	background-image: radial-gradient(circle farthest-side, #dd3e54, #6be585);
10.	background-image: linear-gradient(to right, #009fff, #ec2f4b);
11.	ackground-image: linear-gradient(to right, #654ea3, #eaafc8);
12.	background-image: linear-gradient(25deg,#ff416c, #ff4b2b 50%);
13.	background-image: linear-gradient(25deg, #8a2387, #e94057, #f27121);
14.	background-image: linear-gradient(to right, #1e9600, #fff200, #ff0000);
15.	background-image: linear-gradient(to right, #ed213a 0%, #93291e 100%);
16.	background-image: linear-gradient(-20deg, #fdc830 0%, #f37335 100%);
17.	background-image: linear-gradient(to right, #da4453, #89216b);
18.	background-image: linear-gradient(to right, #333333, #dd1818);
19.	background-image: linear-gradient(to right, #355c7d, #6c5b7b, #c06c84);
20.	background-image: linear-gradient(to right, #bc4e9c, #f80759);
21.	background-image: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);
22.	background-image: linear-gradient(to right, #108dc7, #ef8e38);
23.	background-image: linear-gradient(to right, #fc5c7d, #6a82fb);
24.	background-image: linear-gradient(to right, #fc466b, #3f5efb);
25.	background-image: linear-gradient(to right, #c94b4b, #4b134f);
26.	background-image: linear-gradient(to right, #23074d, #cc5333);
27.	background-image: linear-gradient(to right, #fffbd5, #b20a2c);
28.	background-image: linear-gradient(to right, #fc4a1a, #f7b733);
29.	background-image: linear-gradient(to right, #e1eec3, #f05053);
30.	background-image: linear-gradient(to right, #1a2a6c, #b21f1f, #fdbb2d);
31.	background-image: linear-gradient(to right, #ff9966, #ff5e62);
32.	background-image: linear-gradient(to right, #642b73, #c6426e);
33.	background-image: linear-gradient(to right, #cb356b, #bd3f32);
34.	background-image: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
35.	background-image: linear-gradient(to right, #ef3b36, #ffffff);
36.	background-image: linear-gradient(to right, #c0392b, #8e44ad);
37.	background-image: linear-gradient(to right, #f2994a, #f2c94c);
38.	background-image: linear-gradient(to right, red, orange, yellow);
39.	background-image: linear-gradient(to right, #ffb330, #fffcce, #ffb330);
40.	background-image: linear-gradient(to right, #d3dd18, #35bbca);
41.	background-image: linear-gradient(to right, #870000, #190a05);
42.	background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);
43.	background-image: linear-gradient(to right, #7134ff, #3a1b82);
44.	ackground-image: linear-gradient(to right, #19ff4c, #109c2f);
45.	background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);
46.	background-image: linear-gradient(25deg, #ffd822, #fffa1d);
47.	background-image: linear-gradient(to right, #8360c3, #2ebf91);
48.	background-image: linear-gradient(to right, #434343 0%, black 100%);
49.	background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);
50.	background-image: linear-gradient(to top, #0f0c29, #302b63, #24243e);
51.	background-image: linear-gradient(-45deg, #18a5a7, #bfffc7 50%);
51'.	background-image: linear-gradient(45deg, #18a5a7, #bfffc7 50%);
52.	background-image: linear-gradient(45deg, #18a5a7, #b6c0c5 50%);
53.	background-image: linear-gradient(to right, #112d60, #b6c0c5);
54.	background-image: linear-gradient(to right, #112d60, #dd83e0);
55.	background-image: linear-gradient(to right, #fdabdd, #374a5a);
56.	background-image: linear-gradient(to right, #05999e, #cbe7e3);
57.	background-image: linear-gradient(to right, #eecc51, #203c58);
58.	background-image: linear-gradient(to right, #ffe998, #57370d);
59.	background-image: linear-gradient(to right, #353a5f, #9ebaf3);
60.	background-image: linear-gradient(to right, #ff3e9d, #0e1f40);
61.	background-image: linear-gradient(to right, #ef88bb, #291850);
62.	background-image: linear-gradient(to right, #ffb330, #fffcce);
63.	background-image: linear-gradient(to right, #d06814, #ffcdb2);
64.	background-image: linear-gradient(to right, #e90000, #faa6ff);
65.	background-image: linear-gradient(to right, #e21c34, #500b28);
66.	background-image: linear-gradient(to right, #ccffaa, #1e5b53);
67.	background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
68.	background-image: linear-gradient(to right, #decba4, #3e5151);
69.	background-image: linear-gradient(to right, #8e2de2, #4a00e0);
70.	background-image: linear-gradient(to right, #fffbd5, #b20a2c);
71.	background-image: linear-gradient(to right, #fc5c7d, #6a82fb);
72.	background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
73.	background-image: linear-gradient(to right, #00b4db, #0083b0);
74.	background-image: linear-gradient(to right, #870000, #190a05);
75.	background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);
76.	background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));
77.	background-image: linear-gradient(25deg, #d64c7f, #ee4758 50%);
78.	background-image: linear-gradient(95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );
79.	background-image: linear-gradient(to right, #8360c3, #2ebf91);
80.	background-image: linear-gradient(to right, #434343 0%, black 100%);
81.	background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);
82.	background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);
83.	background-image: linear-gradient(to right, #00b09b, #96c93d);
84.	background-image: linear-gradient(109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1%);
85.	background-image: radial-gradient(circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3%);

Đăng nhận xét

Nếu bạn comment bằng tiếng Việt thì dùng dấu đầy đủ, cám ơn.