Have you noticed UI gradients have quickly come into style? I’ve been sorting through 100’s of gradients, but not all of them are tasteful – and random gradient generators sometimes spit out unusable garbage.
I’ve created this list – of only the most tasteful UI Gradients for designers who only want the best!
Thanks for checking out these UI gradients – please feel free to use, leave a comment below about how you used them!
Why did we provide this resource? We serve contractors and home service companies with marketing + web design! Check out our blog posts about Plumbing Leads, Electrician Leads, Roofing Leads, HVAC Leads, Construction Leads, Remodeling Leads and our Plumbing SEO, Electrician SEO, Roofing SEO, Contractor SEO, Remodeling SEO, and HVAC SEO services!
Sour Tropical Gradient CSS .sour-tropical-gradient { background: -webkit-linear-gradient(360deg, #FD6F46 10%, #FB9832 360%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(360deg, #FD6F46 10%, #FB9832 360%); /* FF3.6+ */ background: linear-gradient(360deg, #FD6F46 10%, #FB9832 360%); /* W3C */ }
Download this Gradient Background in Image Form
Subtle Gray Gradient CSS .subtle-gray-gradient { background: -webkit-linear-gradient(360deg, #dee1e1 10%, #f4f4f4 360%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(360deg, #dee1e1 10%, #f4f4f4 360%); /* FF3.6+ */ background: linear-gradient(360deg, #dee1e1 10%, #f4f4f4 360%); /* W3C */ }
Download this Gradient Background in Image Form
Most Epic Blue Green Gradient .epic-bluegreen-gradient { background: -webkit-linear-gradient(360deg, #01a99c 10%, #0698b1 360%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(360deg, #01a99c 10%, #0698b1 360%); /* FF3.6+ */ background: linear-gradient(360deg, #01a99c 10%, #0698b1 360%); /* W3C */ }
Download this Gradient Background in Image Form
Golden Face Gradient .golden-face-gradient { background: -webkit-linear-gradient(360deg, #8e7a3f 10%, #b09a51 360%); /* Chrome 10+, Saf5.1+ */ background: -o-linear-gradient(360deg, #8e7a3f 10%, #b09a51 360%); /* Opera 11.10+ */ background: linear-gradient(360deg, #8e7a3f 10%, #b09a51 360%); /* W3C */ }
Download this Gradient Background in Image Form
Lime-aid Gradient .lime-aid-gradient {background: -webkit-linear-gradient(360deg, #99D22B 10%, #FBFF00 360%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(360deg, #99D22B 10%, #FBFF00 360%); /* FF3.6+ */ background: linear-gradient(360deg, #99D22B 10%, #FBFF00 360%); /* W3C */ }
Download this Gradient Background in Image Form
Black Chrome Gradient .black-chrome-gradient {background: -webkit-linear-gradient(360deg, #1C1C1C 10%, #494949 360%); background: -moz-linear-gradient(360deg, #1C1C1C 10%, #494949 360%); background: linear-gradient(360deg, #1C1C1C 10%, #494949 360%);}
Download this Gradient Background in Image Form
Aqualicious Gradient – From UI Gradients .aqualicious-gradient { background: -webkit-linear-gradient(360deg, #50C9C3 10%, #96DEDA 360%); /* Chrome 10+, Saf5.1+ */ background: -o-linear-gradient(360deg, #50C9C3 10%, #96DEDA 360%); /* Opera 11.10+ */ background: linear-gradient(360deg, #50C9C3 10%, #96DEDA 360%); /* W3C */ }
Download this Gradient Background in Image Form
Miracle Grow Gradient – Found on Lucas Marin’s Portfolio .miracle-grow-gradient { background: -webkit-linear-gradient(360deg, #b6eae1 10%, #D2FBAD 360%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(360deg, #b6eae1 10%, #D2FBAD 360%); /* FF3.6+ */ background: linear-gradient(360deg, #b6eae1 10%, #D2FBAD 360%); /* W3C */ }
Download this Gradient Background in Image Form
Trust Me, I’m Blue Gradient – Found on Mapbox .trust-blue-gradient {background: -webkit-linear-gradient(360deg, #38aecc 10%, #347fb9 360%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(360deg, #38aecc 10%, #347fb9 360%); /* FF3.6+ */ background: linear-gradient(360deg, #38aecc 10%, #347fb9 360%); /* W3C */ }
Download this Gradient Background in Image Form
Blood Orange Gradient – Found on Kisio Digital .blood-orange-gradient { background: -webkit-linear-gradient(360deg, #d64759 10%, #da7352 360%); /* Chrome 10+, Saf5.1+ */ background: -o-linear-gradient(360deg, #d64759 10%, #da7352 360%); /* Opera 11.10+ */ background: linear-gradient(360deg, #d64759 10%, #da7352 360%); /* W3C */ }
Download this Gradient Background in Image Form
New Leaf .new-leaf-gradient { background: -webkit-linear-gradient(360deg,#00537E 10%,#3AA17E 360%); background: linear-gradient(360deg,#00537E 10%,#3AA17E 360%); }
Download this Gradient Background in Image Form
Hazemaster Grey Gradient – Image form found on Demian Casey .hazemaster-gray-gradient { background: -webkit-linear-gradient(360deg,#949494 10%,#efefef 360%); background: linear-gradient(360deg,#949494 10%,#efefef 360%); }
Download this Gradient Background in Image Form
Murdered Out – Subtle Black Gradient – Black gradient wallpaper found on Wallpaper Cave .murdered-out-black-gradient { background: -webkit-linear-gradient(360deg,#030303 10%,#1f1f1f 360%); background: linear-gradient(360deg,#030303 10%,#1f1f1f 360%); }
Download this Gradient Background in Image Form
Ice Cold – Cool Gradient – Based on Cool Gradients Wallpaper found PC Wall Art .ice-cold-cool-gradient { background: -webkit-linear-gradient(360deg,#e9fbcf 10%,#1d7d8e 360%); background: linear-gradient(360deg,#e9fbcf 10%,#1d7d8e 360%); }
Download this Gradient Background in Image Form
Subtle Dark Gray Gradient Background – .classy-subtle-dark-gray-gradient { background: -webkit-linear-gradient(360deg,#383836 10%,#4a4a4a 360%); background: linear-gradient(360deg,#383836 10%,#4a4a4a 360%); }
Download this Gradient Background in Image Form
Ninja – Dark Green Gradient Background – .dark-green-gradient-background { background: -webkit-linear-gradient(360deg,#224e4d 10%,#083023 360%); background: linear-gradient(360deg,#224e4d 10%,#083023 360%); }
Download this Gradient Background in Image Form
History of UI Gradients
Associated most often with 20th century and digital art, gradients were once shunned by designers during the initial design era, but have since made a comeback. Gradients can most commonly be seen taking the form of either an axial or radial pattern. Axial gradients are a simple color transition from one side to the other, while the radial pattern starts from the inside and moves out, forming a circle.
Gradients can be seen all over the place when it comes to branding and marketing. Spotify often uses color gradients throughout their platform, and Instagram’s latest app logo redesign features a gradient-colored camera.
So, after initially being underutilized by designers, why have gradient’s made a comeback?
Well, one possible explanation is the fact that branding has become such an integral part of a company’s success. With only so many flat colors to choose from, it can be difficult to make your brand colors stand out amongst competitors. With gradients, you can mix and match different colors that work well together to create a unique brand experience for your consumers. Programs and apps like Photoshop have also made it easier for designers to experiment with gradients and different colors.
