هل تبحث عن تدرجات لونية رائعة ورائعة لرسوماتك أو واجهة المستخدم أو تصميم الويب. اذا انت في المكان الصحيح. سنعرض لك في هذا المقال 50 تدرجًا رائعًا ورائعًا لمشروعك القادم. سأعطيك كود CSS والرمز الست عشري الخاص بهم. إليكم مجموعتي التدرجية الخمسين المفضلة. آمل أن يعجبك.
01. Orange Coral
معاينة
#ff9966 → #ff5e62
CSS
background: rgb(255,153,102);
background: linear-gradient(90deg, rgba(255,153,102,1) 0%, rgba(255,94,98,1) 100%);02. Aubergine
معاينة
#aa076b → #61045f
CSS
background: rgb(170,7,107);
background: linear-gradient(90deg, rgba(170,7,107,1) 0%, rgba(97,4,95,1) 100%);03. Sea Blue
معاينة
#2b5876 → #4e4376
CSS
background: rgb(43,88,118);
background: linear-gradient(90deg, rgba(43,88,118,1) 0%, rgba(78,67,118,1) 100%);04. Peach
معاينة
#ed4264 → #ffedbc
CSS
background: rgb(237,66,100);
background: linear-gradient(90deg, rgba(237,66,100,1) 0%, rgba(255,237,188,1) 100%);05. Sunset
معاينة
#ff7e5f → #feb47b
CSS
background: rgb(255,126,95);
background: linear-gradient(90deg, rgba(255,126,95,1) 0%, rgba(254,180,123,1) 100%);06. Royal
معاينة
#141e30 → #243b55
CSS
background: rgb(20,30,48);
background: linear-gradient(90deg, rgba(20,30,48,1) 0%, rgba(36,59,85,1) 100%);07. Celestial
معاينة
#c33764 → #1d2671
CSS
background: rgb(195,55,100);
background: linear-gradient(90deg, rgba(195,55,100,1) 0%, rgba(29,38,113,1) 100%);08. Scooter
معاينة
#36d1dc → #5b86e5
CSS
background: rgb(54,209,220);
background: linear-gradient(90deg, rgba(54,209,220,1) 0%, rgba(91,134,229,1) 100%);09. Morning
معاينة
#ff5f6d → #ffc371
CSS
background: rgb(255,95,109);
background: linear-gradient(90deg, rgba(255,95,109,1) 0%, rgba(255,195,113,1) 100%);10. Decent
معاينة
#4ca1af → #c4e0e5
CSS
background: rgb(76,161,175);
background: linear-gradient(90deg, rgba(76,161,175,1) 0%, rgba(196,224,229,1) 100%);11. Relay
معاينة
#3a1c71 → #d76d77 → #ffaf7b
CSS
background: rgb(58,28,113);
background: linear-gradient(90deg, rgba(58,28,113,1) 0%, rgba(215,109,119,1) 49%, rgba(255,175,123,1) 100%);12. Dusk
معاينة
#ffd89b → #19547b
CSS
background: rgb(255,216,155);
background: linear-gradient(90deg, rgba(255,216,155,1) 0%, rgba(25,84,123,1) 100%);13. Bourbon
معاينة
#ec6f66 → #f3a183
CSS
background: rgb(236,111,102);
background: linear-gradient(90deg, rgba(236,111,102,1) 0%, rgba(243,161,131,1) 100%);14. Night Love
معاينة
#4568dc → #b06ab3
CSS
background: rgb(69,104,220);
background: linear-gradient(90deg, rgba(69,104,220,1) 0%, rgba(176,106,179,1) 100%);15. Bloody
معاينة
#ff512f → #dd2476
CSS
background: rgb(255,81,47);
background: linear-gradient(90deg, rgba(255,81,47,1) 0%, rgba(221,36,118,1) 100%);16. Fresh Apple
معاينة
#ba5370 → #f4e2d8
CSS
background: rgb(186,83,112);
background: linear-gradient(90deg, rgba(186,83,112,1) 0%, rgba(244,226,216,1) 100%);16. River
معاينة
#43cea2 → #185a9d
CSS
background: rgb(67,206,162);
background: linear-gradient(90deg, rgba(67,206,162,1) 0%, rgba(24,90,157,1) 100%);17. Worm Kiss
معاينة
#7b4397 → #dc2430
CSS
background: rgb(123,67,151);
background: linear-gradient(90deg, rgba(123,67,151,1) 0%, rgba(220,36,48,1) 100%);18. Sleeping Baby
معاينة
#ddd6f3 → #faaca8
CSS
background: rgb(221,214,243);
background: linear-gradient(90deg, rgba(221,214,243,1) 0%, rgba(250,172,168,1) 100%);19. Frost
معاينة
#000428 → #004e92
CSS
background: rgb(0,4,40);
background: linear-gradient(90deg, rgba(0,4,40,1) 0%, rgba(0,78,146,1) 100%);20. Pinkly
معاينة
#d66d75 → #e29587
CSS
background: rgb(214,109,117);
background: linear-gradient(90deg, rgba(214,109,117,1) 0%, rgba(226,149,135,1) 100%);21. Green Sky
معاينة
#02aab0 → #00cdac
CSS
background: rgb(2,170,176);
background: linear-gradient(90deg, rgba(2,170,176,1) 0%, rgba(0,205,172,1) 100%);22. Pale Wood
معاينة
#eacda3 → #d6ae7b
CSS
background: rgb(234,205,163);
background: linear-gradient(90deg, rgba(234,205,163,1) 0%, rgba(214,174,123,1) 100%);23. Rose Bud
معاينة
#eecda3 → #ef629f
CSS
background: rgb(238,205,163);
background: linear-gradient(90deg, rgba(238,205,163,1) 0%, rgba(239,98,159,1) 100%);24. Cloudy
معاينة
#614385 → #516395
CSS
background: rgb(97,67,133);
background: linear-gradient(90deg, rgba(97,67,133,1) 0%, rgba(81,99,149,1) 100%);25. Banana Leaf
معاينة
#56ab2f → #a8e063
CSS
background: rgb(86,171,47);
background: linear-gradient(90deg, rgba(86,171,47,1) 0%, rgba(168,224,99,1) 100%);26. Pinky
معاينة
#dd5e89 → #f7bb97
CSS
background: rgb(221,94,137);
background: linear-gradient(90deg, rgba(221,94,137,1) 0%, rgba(247,187,151,1) 100%);27. Cherry
معاينة
#eb3349 → #f45c43
CSS
background: rgb(235,51,73);
background: linear-gradient(90deg, rgba(235,51,73,1) 0%, rgba(244,92,67,1) 100%);28. Mealting Ice
معاينة
#06beb6 → #48b1bf
CSS
background: rgb(6,190,182);
background: linear-gradient(90deg, rgba(6,190,182,1) 0%, rgba(72,177,191,1) 100%);29. Lost Memory
معاينة
#de6262 → #ffb88c
CSS
background: rgb(222,98,98);
background: linear-gradient(90deg, rgba(222,98,98,1) 0%, rgba(255,184,140,1) 100%);30. 50 Shades of Grey
معاينة
#bdc3c7 → #2c3e50
CSS
background: rgb(189,195,199);
background: linear-gradient(90deg, rgba(189,195,199,1) 0%, rgba(44,62,80,1) 100%);31. Mauve
معاينة
#42275a → #734b6d
CSS
background: rgb(66,39,90);
background: linear-gradient(90deg, rgba(66,39,90,1) 0%, rgba(115,75,109,1) 100%);32. Pink Paper
معاينة
#ee9ca7 → #ffdde1
CSS
background: rgb(238,156,167);
background: linear-gradient(90deg, rgba(238,156,167,1) 0%, rgba(255,221,225,1) 100%);33. Purple Love
معاينة
#cc2b5e → #753a88
CSS
background: rgb(204,43,94);
background: linear-gradient(90deg, rgba(204,43,94,1) 0%, rgba(117,58,136,1) 100%);34. Sexy Blue
معاينة
#2193b0 → #6dd5ed
CSS
background: rgb(33,147,176);
background: linear-gradient(90deg, rgba(33,147,176,1) 0%, rgba(109,213,237,1) 100%);35. Roseanna
معاينة
#ffafbd → #ffc3a0
CSS
background: rgb(255,175,189);
background: linear-gradient(90deg, rgba(255,175,189,1) 0%, rgba(255,195,160,1) 100%);36. Dusty Grass
معاينة
#d4fc79 → #96e6a1
CSS
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);37. Deep Blue
معاينة
#e0c3fc → #8ec5fc
CSS
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);38. Hulk
معاينة
#0ba360 → #3cba92
CSS
background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%); 39. Notebook
معاينة
#9795f0 → #fbc8d4
CSS
background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%); 40. Aqua Splash
معاينة
#13547a → #80d0c7
CSS
background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%); 41. Premium Dark
معاينة
#434343 → #000000
CSS
background-image: linear-gradient(to right, #434343 0%, black 100%); 42. Love Bed
معاينة
#ff758c → #ff7eb3
CSS
background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%); 43. Over Sun
معاينة
#abecd6 → #fbed96
CSS
background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%); 44. Desert Hump
معاينة
#c79081 → #dfa579
CSS
background-image: linear-gradient(to top, #c79081 0%, #dfa579 100%); 45. Eternal
معاينة
#09203f → #537895
CSS
background-image: linear-gradient(to top, #09203f 0%, #537895 100%); 46. Young Grass
معاينة
#9be15d → #00e3ae
CSS
background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%); 47. Solid Stone
معاينة
#243949 → #517fa4
CSS
background-image: linear-gradient(to right, #243949 0%, #517fa4 100%); 48. Indigo
معاينة
#b224ef → #7579ff
CSS
background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%); 49. Morning Salad
معاينة
#B7F8DB → #50A7C2
CSS
background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%); 50. Perfect White
معاينة
#E3FDF5 → #FFE6FA
CSS
background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%); 