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

by on November 7, 2015

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(90deg, #FD6F46 10%, #FB9832 90%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(90deg, #FD6F46 10%, #FB9832 90%); /* FF3.6+ */ background: linear-gradient(90deg, #FD6F46 10%, #FB9832 90%); /* W3C */ }

Subtle Gray Gradient

Subtle Gray Gradient CSS .subtle-gray-gradient { background: -webkit-linear-gradient(90deg, #dee1e1 10%, #f4f4f4 90%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(90deg, #dee1e1 10%, #f4f4f4 90%); /* FF3.6+ */ background: linear-gradient(90deg, #dee1e1 10%, #f4f4f4 90%); /* W3C */ }

Most Epic Blue Green Gradient

Most Epic Blue Green Gradient .epic-bluegreen-gradient { background: -webkit-linear-gradient(90deg, #01a99c 10%, #0698b1 90%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(90deg, #01a99c 10%, #0698b1 90%); /* FF3.6+ */ background: linear-gradient(90deg, #01a99c 10%, #0698b1 90%); /* W3C */ }

Golden Face Gradient

Golden Face Gradient .golden-face-gradient { background: -webkit-linear-gradient(90deg, #8e7a3f 10%, #b09a51 90%); /* Chrome 10+, Saf5.1+ */ background: -o-linear-gradient(90deg, #8e7a3f 10%, #b09a51 90%); /* Opera 11.10+ */ background: linear-gradient(90deg, #8e7a3f 10%, #b09a51 90%); /* W3C */ }

Lime-aid Gradient

Lime-aid Gradient .lime-aid-gradient {background: -webkit-linear-gradient(90deg, #99D22B 10%, #FBFF00 90%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(90deg, #99D22B 10%, #FBFF00 90%); /* FF3.6+ */ background: linear-gradient(90deg, #99D22B 10%, #FBFF00 90%); /* W3C */ }

Black Chrome Gradient

Black Chrome Gradient .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%);}

Aqualicious Gradient

Aqualicious Gradient – From UI Gradients .aqualicious-gradient { background: -webkit-linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%); /* Chrome 10+, Saf5.1+ */ background: -o-linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%); /* Opera 11.10+ */ background: linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%); /* W3C */ }

Miracle Grow Gradient

Miracle Grow Gradient – Found on Lucas Marin’s Portfolio .miracle-grow-gradient { background: -webkit-linear-gradient(90deg, #b6eae1 10%, #D2FBAD 90%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(90deg, #b6eae1 10%, #D2FBAD 90%); /* FF3.6+ */ background: linear-gradient(90deg, #b6eae1 10%, #D2FBAD 90%); /* W3C */ }

Trust Me, I’m Blue Gradient

Trust Me, I’m Blue Gradient – Found on Mapbox .trust-blue-gradient {background: -webkit-linear-gradient(90deg, #38aecc 10%, #347fb9 90%); /* Chrome 10+, Saf5.1+ */ background: -moz-linear-gradient(90deg, #38aecc 10%, #347fb9 90%); /* FF3.6+ */ background: linear-gradient(90deg, #38aecc 10%, #347fb9 90%); /* W3C */ }

Blood Orange Gradient

Blood Orange Gradient – Found on Kisio Digital .blood-orange-gradient { background: -webkit-linear-gradient(90deg, #d64759 10%, #da7352 90%); /* Chrome 10+, Saf5.1+ */ background: -o-linear-gradient(90deg, #d64759 10%, #da7352 90%); /* Opera 11.10+ */ background: linear-gradient(90deg, #d64759 10%, #da7352 90%); /* W3C */ }

New Leaf Gradient

New Leaf – Found on Gradients.io .new-leaf-gradient { background: -webkit-linear-gradient(90deg,#00537E 10%,#3AA17E 90%); background: linear-gradient(90deg,#00537E 10%,#3AA17E 90%); }

Hazemaster Gray Gradient

Hazemaster Grey Gradient – Image form found on Demian Casey .hazemaster-gray-gradient { background: -webkit-linear-gradient(90deg,#949494 10%,#efefef 90%); background: linear-gradient(90deg,#949494 10%,#efefef 90%); }

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(90deg,#030303 10%,#1f1f1f 90%); background: linear-gradient(90deg,#030303 10%,#1f1f1f 90%); }

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(90deg,#e9fbcf 10%,#1d7d8e 90%); background: linear-gradient(90deg,#e9fbcf 10%,#1d7d8e 90%); }

Subtle Dark Gray Gradient Background

Subtle Dark Gray Gradient Background.classy-subtle-dark-gray-gradient { background: -webkit-linear-gradient(90deg,#383836 10%,#4a4a4a 90%); background: linear-gradient(90deg,#383836 10%,#4a4a4a 90%); }

Ninja – Dark Green Gradient Background

Ninja – Dark Green Gradient Background.dark-green-gradient-background { background: -webkit-linear-gradient(90deg,#224e4d 10%,#083023 90%); background: linear-gradient(90deg,#224e4d 10%,#083023 90%); }


  •  
  •  
  •  
  •  
Free Web Design Audiobook
  • Ana Tudor

    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 unprefixed since the autumn of 2012 (more than 3 years ago, version was 16), so the -moz- prefix is only needed for Firefox 3.6 to 15, everything else after that is unprefixed.

    Chrome supports them unprefixed since March 2013 (more than 2 years and a half ago, version 26). Safari (desktop) supports them unprefixed since version 6.1.

    Opera unprefixed them (stopped using the -o- prefix) in 2012 (more than 3 years ago, version was 12) as well. So the -o- prefix is only needed for Opera 11.1-11.5. And no other Opera version before or after that.

    So the unprefixed version is not just the W3C spec, it’s already in IE 10+/ Edge, Firefox 16+, Chrome 26+, Safari 6.1+, Opera 12+ as far as desktop browsers go. Things are a bit more hairy for mobile, as a lot of mobile browsers only dropped the -webkit- prefix later.

    Full support info here http://caniuse.com/#feat=css-gradients to help you modify the comments.

    • Tim Brown

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

      Tim

  • https://franciskim.co Francis Kim

    Nice colours :)

    • Tim Brown

      Thanks Francis :)

  • Andrei Volgin

    Black gradient has wrong snippet :(

    • Tim Brown

      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

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

    • Tim Brown

      Thanks for commenting :)

  • Mattias Hising
    • Tim Brown

      Thank you Mattias! 😀 !

  • James

    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