Web Design

16 CSS Gradient Backgrounds | Blue Gradient CSS, Grey & Many More

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…

Estimated Read Time:  5 minutes

Share: 

Gradient Background

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.

YouTube video

YouTube video

I’ve created this list – of only the most tasteful UI Gradients for designers who only want the best!

Black to the fuschia gradient meme

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

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

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

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 .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 .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 .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

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

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

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

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 Gradient

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 Gray Gradient

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

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 Gradients

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

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

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.

YouTube video

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.

YouTube video

Are You a Home Service Business Who Wants to Increase Your Qualified Leads?

Contact Us Now

 100+ 5-Stars

 Award-Winning

 Industry-Vetted

The Roofing Academy