-->
zWZ3ZJ90R4zzhbql6NUZDSuEAK5vmsQ96TEJw5QR
Bookmark

50 Awesome Cool Gradients CSS

bdShroud
bdShroud
Update:
... menit baca
Dengarkan
Are you looking for awesome cool gradients color for your graphics, UI or Web design. Then you are at right place. In this artical we will show you 50 awesome cool gradients for your next project. I will give you their CSS and Hexadecimal code. Here is my 50 favorites gradient collection. Hope you fall in love.


01. Orange Coral

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#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

Preview

#d4fc79 → #96e6a1

CSS


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

37. Deep Blue

Preview

#e0c3fc → #8ec5fc

CSS


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

38. Hulk

Preview

#0ba360 → #3cba92

CSS


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

39. Notebook

Preview

#9795f0 → #fbc8d4

CSS


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

40. Aqua Splash

Preview

#13547a → #80d0c7

CSS


background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);

41. Premium Dark

Preview

#434343 → #000000

CSS


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

42. Love Bed

Preview

#ff758c → #ff7eb3

CSS


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

43. Over Sun

Preview

#abecd6 → #fbed96

CSS


background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);

44. Desert Hump

Preview

#c79081 → #dfa579

CSS


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

45. Eternal

Preview

#09203f → #537895

CSS


background-image: linear-gradient(to top, #09203f 0%, #537895 100%);

46. Young Grass

Preview

#9be15d → #00e3ae

CSS


background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);

47. Solid Stone

Preview

#243949 → #517fa4

CSS


background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);

48. Indigo

Preview

#b224ef → #7579ff

CSS


background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);

49. Morning Salad

Preview

#B7F8DB → #50A7C2

CSS


background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);

50. Perfect White

Preview

#E3FDF5 → #FFE6FA

CSS


background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
Related Posts
Post a Comment
Posted by:
bdShroud
bdShroud

Related Posts

Post a Comment