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

5

by on February 2, 2018

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

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

  •  
  •  
  •  
  •  

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 Free Marketing Audiobook

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 "UI Gradients | Curated for web designers w/ CSS for backgrounds"

Notify of
avatar
Sort by:   newest | oldest | most voted
Ana Tudor
Guest
So the two problems I mentioned on twitter because it’s easier this way than in 140 characters. #1 The live examples are WebKit-only. #2 The code looks ColorZilla generated. A lot of people use that tool, but it’s years behind the current reality of the web. The -ms- prefix version is not needed at all, remove that line completely. IE 10 supports gradients unprefixed, IE 9 does not support them at all. The support info in the rest of the comments is misleading, it makes it look like the situation is way worse than it really is. Firefox supports gradients… Read more »
Tim Brown
Guest

Word, thank you for the feedback and adding to the discussion!

Tim

Francis Kim
Guest

Nice colours 🙂

Tim Brown
Guest

Thanks Francis 🙂

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%);}

graffit
Guest

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

Tim Brown
Guest

Thanks for commenting 🙂

Mattias Hising
Guest
Tim Brown
Guest

Thank you Mattias! 😀 !

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.

Ready to get started?

Get a free consultation now