16 UI Gradients | Curated for web designers w/ CSS for backgrounds

By
Updated May 22, 2018
13 Comments
5

16 UI Gradients | Curated for web designers w/ CSS for backgrounds


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

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!

Black to the fuschia gradient meme

Thanks for checking out these UI gradients – please feel free to use, and comment if you use them for something.

In addition to doing Minneapolis SEO, in my work doing Minneapolis web design, I’ve noticed – UI gradients are back in fashion after falling into un-fashionability for years – but my suggestion is to use UI gradients subtly or as an overlay for another image.

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 – Found on Gradients.io .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

  •  
  •  
  •  
  • 3

Related Posts


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

Free Marketing Audiobook

Leave a Reply

13 Comments on "16 UI Gradients | Curated for web designers w/ CSS for backgrounds"

Notify of
avatar
Sort by:   newest | oldest | most voted
nicole langford
Guest

What app were these made in? I was trying to recreate in illustrator but a little confused.

James
Guest

I’ve recently created an app for generating nice-looking CSS gradients. It’s currently under active development. I thought you might find it interesting: https://gradienteer.com.

Mattias Hising
Guest
Tim Brown
Guest

Thank you Mattias! 😀 !

graffit
Guest

Mmm… Really Like it.
Used one for my work. Thanks, Tim!

Tim Brown
Guest

Thanks for commenting 🙂

Andrei Volgin
Guest

Black gradient has wrong snippet 🙁

Tim Brown
Guest

Fixed, thank you!

.black-chrome-gradient {background: -webkit-linear-gradient(90deg, #1C1C1C 10%, #494949 90%);
background: -moz-linear-gradient(90deg, #1C1C1C 10%, #494949 90%);
background: linear-gradient(90deg, #1C1C1C 10%, #494949 90%);}

Ready to get started?

Get a free consultation now