Skip to content

Instantly share code, notes, and snippets.

@azs06

azs06/gradients.css

Created March 8, 2018 08:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save azs06/afa7a098f9259476552ed800e747258f to your computer and use it in GitHub Desktop.
Save azs06/afa7a098f9259476552ed800e747258f to your computer and use it in GitHub Desktop.
Download ZIP
Background gradients
Raw
gradients.css
#gradient-1{
background: rgb(255,174,39); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255,174,39,1) 0%, rgba(222,73,109,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,174,39,1)), color-stop(100%,rgba(222,73,109,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffae27', endColorstr='#de496d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#gradient-2{
background: rgb(222,73,109); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(222,73,109,1) 0%, rgba(171,73,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(222,73,109,1)), color-stop(100%,rgba(171,73,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(222,73,109,1) 0%,rgba(171,73,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(222,73,109,1) 0%,rgba(171,73,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(222,73,109,1) 0%,rgba(171,73,222,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(222,73,109,1) 0%,rgba(171,73,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de496d', endColorstr='#ab49de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#gradient-3{
background: rgb(171,73,222); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(171,73,222,1) 0%, rgba(73,84,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(171,73,222,1)), color-stop(100%,rgba(73,84,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab49de', endColorstr='#4954de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#gradient-4{
background: rgb(171,73,222); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(171,73,222,1) 0%, rgba(73,84,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(171,73,222,1)), color-stop(100%,rgba(73,84,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab49de', endColorstr='#4954de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#gradient-5{
background: rgb(171,73,222); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(171,73,222,1) 0%, rgba(73,84,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(171,73,222,1)), color-stop(100%,rgba(73,84,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab49de', endColorstr='#4954de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#gradient-6{
background: rgb(171,73,222); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(171,73,222,1) 0%, rgba(73,84,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(171,73,222,1)), color-stop(100%,rgba(73,84,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab49de', endColorstr='#4954de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#gradient-7{
background: rgb(171,73,222); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(171,73,222,1) 0%, rgba(73,84,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(171,73,222,1)), color-stop(100%,rgba(73,84,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab49de', endColorstr='#4954de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#gradient-8{
background: rgb(171,73,222); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(171,73,222,1) 0%, rgba(73,84,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(171,73,222,1)), color-stop(100%,rgba(73,84,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(171,73,222,1) 0%,rgba(73,84,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab49de', endColorstr='#4954de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#gradient-9{
background: rgb(73,84,222); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(73,84,222,1) 0%, rgba(73,221,216,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(73,84,222,1)), color-stop(100%,rgba(73,221,216,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(73,84,222,1) 0%,rgba(73,221,216,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(73,84,222,1) 0%,rgba(73,221,216,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(73,84,222,1) 0%,rgba(73,221,216,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(73,84,222,1) 0%,rgba(73,221,216,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4954de', endColorstr='#49ddd8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#gradient-10{
background: rgb(73,221,216); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(73,221,216,1) 0%, rgba(25,226,115,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(73,221,216,1)), color-stop(100%,rgba(25,226,115,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(73,221,216,1) 0%,rgba(25,226,115,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(73,221,216,1) 0%,rgba(25,226,115,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(73,221,216,1) 0%,rgba(25,226,115,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(73,221,216,1) 0%,rgba(25,226,115,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49ddd8', endColorstr='#19e273',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#gradient-11{
background: rgb(73,221,216); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(73,221,216,1) 0%, rgba(25,226,115,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(73,221,216,1)), color-stop(100%,rgba(25,226,115,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(73,221,216,1) 0%,rgba(25,226,115,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(73,221,216,1) 0%,rgba(25,226,115,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(73,221,216,1) 0%,rgba(25,226,115,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(73,221,216,1) 0%,rgba(25,226,115,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49ddd8', endColorstr='#19e273',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.gradient.fadeOut{
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment