Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
UI Gradients
.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 { 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 */ }
.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 { 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 {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 {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 { 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 { 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-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 { 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 { background: -webkit-linear-gradient(90deg,#00537E 10%,#3AA17E 90%); background: linear-gradient(90deg,#00537E 10%,#3AA17E 90%); }
.hazemaster-gray-gradient { background: -webkit-linear-gradient(90deg,#949494 10%,#efefef 90%); background: linear-gradient(90deg,#949494 10%,#efefef 90%); }
.murdered-out-black-gradient { background: -webkit-linear-gradient(90deg,#030303 10%,#1f1f1f 90%); background: linear-gradient(90deg,#030303 10%,#1f1f1f 90%); }
.ice-cold-cool-gradient { background: -webkit-linear-gradient(90deg,#e9fbcf 10%,#1d7d8e 90%); background: linear-gradient(90deg,#e9fbcf 10%,#1d7d8e 90%); }
.classy-subtle-dark-gray-gradient { background: -webkit-linear-gradient(90deg,#383836 10%,#4a4a4a 90%); background: linear-gradient(90deg,#383836 10%,#4a4a4a 90%); }
.dark-green-gradient-background { background: -webkit-linear-gradient(90deg,#224e4d 10%,#083023 90%); background: linear-gradient(90deg,#224e4d 10%,#083023 90%); }
@hising

This comment has been minimized.

Copy link
Owner Author

hising commented May 17, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.