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

5

by on May 22, 2018

Gradients for Web design, Web Design Gradients, CSS Gradients, UI, UX, Graphic Design Gradients

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

  •  
  •  
  •  
  •  

Black to the fuschia gradient memeHave 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, 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


  •  
  •  
  •  
  •  
Free Marketing Audiobook

Leave a Reply

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

Notify of
avatar
Sort by:   newest | oldest | most voted
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%);}

Francis Kim
Guest

Nice colours 🙂

Tim Brown
Guest

Thanks Francis 🙂

Ready to get started?

Get a free consultation now