Home » HTML

Awesome CSS Color Gradients Examples

By IncludeHelp Last updated : October 27, 2024

If you are looking for coolest, beautiful, and awesome background colors for your web design, We have listed 50 gradient colors along with CSS classes, and you can also see what they look like. You can simply copy the CSS class and use it in your web designs.

1. Sunset

.bg_sunset{background: linear-gradient(to right, #ff7e5f, #feb47b); }

2. Aqua Splash

.bg_aqua_splash { background: linear-gradient(to right, #13547a, #80d0c7); }

3. Deep Sea

.bg_deep_sea { background: linear-gradient(to right, #2c3e50, #4ca1af); }

4. Purple Paradise

.bg_purple_paradise { background: linear-gradient(to right, #1e3c72, #2a5298); }

5. Pink Lemonade

.bg_pink_lemonade { background: linear-gradient(to right, #fbc2eb, #a6c1ee); }

6. Sunny Morning

.bg_sunny_morning { background: linear-gradient(to right, #f6d365, #fda085); }

7. Cool Blues

.bg_cool_blues { background: linear-gradient(to right, #2193b0, #6dd5ed); }

8. Purple Dreams

.bg_purple_dreams { background: linear-gradient(to right, #9b59b6, #8e44ad); }

9. Forest Hues

.bg_forest_hues { background: linear-gradient(to right, #5a3f37, #2c7744); }

10. Golden Sand

.bg_golden_sand { background: linear-gradient(to right, #f8b500, #fceabb); }

11. Frosty Sky

.bg_frosty_sky { background: linear-gradient(to right, #f7f8f8, #acbb78); }

12. Peachy Sunrise

.bg_peachy_sunrise { background: linear-gradient(to right, #ff9a9e, #fecfef); }

13. Calm Waters

.bg_calm_waters { background: linear-gradient(to right, #4e54c8, #8f94fb); }

14. Warm Glow

.bg_warm_glow { background: linear-gradient(to right, #ff9966, #ff5e62); }

15. Coral Reef

.bg_coral_reef { background: linear-gradient(to right, #ff6a88, #ff99ac); }

16. Tropical Sunshine

.bg_tropical_sunshine { background: linear-gradient(to right, #ff9a8b, #ff6a88); }

17. Electric Violet

.bg_electric_violet { background: linear-gradient(to right, #4776e6, #8e54e9); }

18. Neon Sky

.bg_neon_sky { background: linear-gradient(to right, #00f260, #0575e6); }

19. Deep Ocean

.bg_deep_ocean { background: linear-gradient(to right, #2b5876, #4e4376); }

20. Lush Green

.bg_lush_green { background: linear-gradient(to right, #56ab2f, #a8e063); }

21. Minty Fresh

.bg_sunset{ background: linear-gradient(to right, #76b852, #8dc26f); }

22. Pink Sky

.bg_sunset{ background: linear-gradient(to right, #f953c6, #b91d73); }

23. Fiery Sunset

.bg_sunset{ background: linear-gradient(to right, #e96443, #904e95); }

24. Ocean Breeze

.bg_sunset{ background: linear-gradient(to right, #43c6ac, #191654); }

25. Velvet Night

.bg_sunset{ background: linear-gradient(to right, #434343, #000000); }

26. Berry Mix

.bg_sunset{ background: linear-gradient(to right, #ff6e7f, #bfe9ff); }

27. Tangerine Burst

.bg_sunset{ background: linear-gradient(to right, #f12711, #f5af19); }

28. Mystical Forest

.bg_sunset{ background: linear-gradient(to right, #141e30, #243b55); }

29. Bubblegum Pink

.bg_sunset{ background: linear-gradient(to right, #ff0099, #493240); }

30. Cotton Candy

.bg_sunset{ background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); }

31. Blue Mist

.bg_sunset{ background: linear-gradient(to right, #3a7bd5, #3a6073); }

32. Autumn Glow

.bg_sunset{ background: linear-gradient(to right, #f79d00, #64f38c); }

33. Shining Sun

.bg_sunset{ background: linear-gradient(to right, #ff512f, #dd2476); }

34. Golden Hour

.bg_sunset{ background: linear-gradient(to right, #fc4a1a, #f7b733); }

35. Neon Greens

.bg_sunset{ background: linear-gradient(to right, #00c6ff, #0072ff); }

36. Starry Night

.bg_sunset{ background: linear-gradient(to right, #0f2027, #203a43, #2c5364); }

37. Candy Crush

.bg_sunset{ background: linear-gradient(to right, #d53369, #daae51); }

38. Mellow Yellow

.bg_sunset{ background: linear-gradient(to right, #ffeb3b, #ffc107); }

39. Lavender Field

.bg_sunset{ background: linear-gradient(to right, #9575cd, #7986cb); }

40. Rainbow Delight

.bg_sunset{ background: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4); }

41. Stormy Sky

.bg_sunset{ background: linear-gradient(to right, #232526, #414345); }

42. Glacier Blue

.bg_sunset{ background: linear-gradient(to right, #5ee7df, #b490ca); }

43. Creamsicle

.bg_sunset{ background: linear-gradient(to right, #ffb75e, #ed8f03); }

44. Icy Peaks

.bg_sunset{ background: linear-gradient(to right, #00c9ff, #92fe9d); }

45. Purple Rain

.bg_sunset{ background: linear-gradient(to right, #7f00ff, #e100ff); }

46. Bright Summer

.bg_sunset{ background: linear-gradient(to right, #00b09b, #96c93d); }

47. Pink Fog

.bg_sunset{ background: linear-gradient(to right, #f77062, #fe5196); }

48. Warm Ocean

.bg_sunset{ background: linear-gradient(to right, #ff758c, #ff7eb3); }

49. Teal Love

.bg_sunset{ background: linear-gradient(to right, #11998e, #38ef7d); }

50. Royal Blue

.bg_sunset{ background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b); }