ANHLEVAN.TK 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(to right, #8360c3, #2ebf91); | |
| 79. | background-image: linear-gradient(to right, #434343 0%, black 100%); | |
| 80. | background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%); | |
| 81. | background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e); | |
| 82. | background-image: linear-gradient(to right, #00b09b, #96c93d); | |
| 83. | background-image: linear-gradient(95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% ); | |
| 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%); |
Tags:
library