Skip to content

Instantly share code, notes, and snippets.

@cyclopslabs
Created February 21, 2014 15:00
Show Gist options
  • Save cyclopslabs/9135731 to your computer and use it in GitHub Desktop.
Save cyclopslabs/9135731 to your computer and use it in GitHub Desktop.
CSS3 Gradient Generator Awesomeness
background: #bd301f; /* Old browsers */
background: -moz-linear-gradient(left, #bd301f 0%, #c03322 0%, #bf3b24 3%, #c6462d 6%, #c6482f 7%, #ca5237 10%, #ca5237 11%, #cb5539 11%, #cb5539 12%, #cc563c 12%, #cd573d 12%, #ca573c 13%, #cd5a3f 13%, #ce5b40 14%, #cd5a3d 14%, #d05d40 15%, #d25f44 17%, #d46146 17%, #d26045 18%, #d46247 18%, #d46247 19%, #d5664a 20%, #db694e 25%, #d96a4e 25%, #dc6d51 26%, #dc6d51 28%, #e16f54 30%, #e77155 37%, #ee6d50 43%, #ed6c4f 45%, #ef694c 46%, #f16a4c 47%, #f16649 49%, #f16a4c 50%, #ef694c 52%, #ed6c4f 53%, #ed6d50 56%, #eb6f53 56%, #e77155 61%, #e47154 62%, #e37055 66%, #db6c50 72%, #d96a4e 72%, #d8694d 75%, #d36045 80%, #d15e43 81%, #d15e43 82%, #d05d40 82%, #ce5b3e 83%, #cf5c41 83%, #ca573c 85%, #cb5539 86%, #ca5237 86%, #ca5237 88%, #c6482f 91%, #c6462d 92%, #c4422a 93%, #c4422a 94%, #bf3b24 95%, #c13a26 95%, #c13623 97%, #bd2e1e 98%, #bf2d20 98%, #bc2a1d 99%, #bb271b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bd301f), color-stop(0%,#c03322), color-stop(3%,#bf3b24), color-stop(6%,#c6462d), color-stop(7%,#c6482f), color-stop(10%,#ca5237), color-stop(11%,#ca5237), color-stop(11%,#cb5539), color-stop(12%,#cb5539), color-stop(12%,#cc563c), color-stop(12%,#cd573d), color-stop(13%,#ca573c), color-stop(13%,#cd5a3f), color-stop(14%,#ce5b40), color-stop(14%,#cd5a3d), color-stop(15%,#d05d40), color-stop(17%,#d25f44), color-stop(17%,#d46146), color-stop(18%,#d26045), color-stop(18%,#d46247), color-stop(19%,#d46247), color-stop(20%,#d5664a), color-stop(25%,#db694e), color-stop(25%,#d96a4e), color-stop(26%,#dc6d51), color-stop(28%,#dc6d51), color-stop(30%,#e16f54), color-stop(37%,#e77155), color-stop(43%,#ee6d50), color-stop(45%,#ed6c4f), color-stop(46%,#ef694c), color-stop(47%,#f16a4c), color-stop(49%,#f16649), color-stop(50%,#f16a4c), color-stop(52%,#ef694c), color-stop(53%,#ed6c4f), color-stop(56%,#ed6d50), color-stop(56%,#eb6f53), color-stop(61%,#e77155), color-stop(62%,#e47154), color-stop(66%,#e37055), color-stop(72%,#db6c50), color-stop(72%,#d96a4e), color-stop(75%,#d8694d), color-stop(80%,#d36045), color-stop(81%,#d15e43), color-stop(82%,#d15e43), color-stop(82%,#d05d40), color-stop(83%,#ce5b3e), color-stop(83%,#cf5c41), color-stop(85%,#ca573c), color-stop(86%,#cb5539), color-stop(86%,#ca5237), color-stop(88%,#ca5237), color-stop(91%,#c6482f), color-stop(92%,#c6462d), color-stop(93%,#c4422a), color-stop(94%,#c4422a), color-stop(95%,#bf3b24), color-stop(95%,#c13a26), color-stop(97%,#c13623), color-stop(98%,#bd2e1e), color-stop(98%,#bf2d20), color-stop(99%,#bc2a1d), color-stop(100%,#bb271b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #bd301f 0%,#c03322 0%,#bf3b24 3%,#c6462d 6%,#c6482f 7%,#ca5237 10%,#ca5237 11%,#cb5539 11%,#cb5539 12%,#cc563c 12%,#cd573d 12%,#ca573c 13%,#cd5a3f 13%,#ce5b40 14%,#cd5a3d 14%,#d05d40 15%,#d25f44 17%,#d46146 17%,#d26045 18%,#d46247 18%,#d46247 19%,#d5664a 20%,#db694e 25%,#d96a4e 25%,#dc6d51 26%,#dc6d51 28%,#e16f54 30%,#e77155 37%,#ee6d50 43%,#ed6c4f 45%,#ef694c 46%,#f16a4c 47%,#f16649 49%,#f16a4c 50%,#ef694c 52%,#ed6c4f 53%,#ed6d50 56%,#eb6f53 56%,#e77155 61%,#e47154 62%,#e37055 66%,#db6c50 72%,#d96a4e 72%,#d8694d 75%,#d36045 80%,#d15e43 81%,#d15e43 82%,#d05d40 82%,#ce5b3e 83%,#cf5c41 83%,#ca573c 85%,#cb5539 86%,#ca5237 86%,#ca5237 88%,#c6482f 91%,#c6462d 92%,#c4422a 93%,#c4422a 94%,#bf3b24 95%,#c13a26 95%,#c13623 97%,#bd2e1e 98%,#bf2d20 98%,#bc2a1d 99%,#bb271b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #bd301f 0%,#c03322 0%,#bf3b24 3%,#c6462d 6%,#c6482f 7%,#ca5237 10%,#ca5237 11%,#cb5539 11%,#cb5539 12%,#cc563c 12%,#cd573d 12%,#ca573c 13%,#cd5a3f 13%,#ce5b40 14%,#cd5a3d 14%,#d05d40 15%,#d25f44 17%,#d46146 17%,#d26045 18%,#d46247 18%,#d46247 19%,#d5664a 20%,#db694e 25%,#d96a4e 25%,#dc6d51 26%,#dc6d51 28%,#e16f54 30%,#e77155 37%,#ee6d50 43%,#ed6c4f 45%,#ef694c 46%,#f16a4c 47%,#f16649 49%,#f16a4c 50%,#ef694c 52%,#ed6c4f 53%,#ed6d50 56%,#eb6f53 56%,#e77155 61%,#e47154 62%,#e37055 66%,#db6c50 72%,#d96a4e 72%,#d8694d 75%,#d36045 80%,#d15e43 81%,#d15e43 82%,#d05d40 82%,#ce5b3e 83%,#cf5c41 83%,#ca573c 85%,#cb5539 86%,#ca5237 86%,#ca5237 88%,#c6482f 91%,#c6462d 92%,#c4422a 93%,#c4422a 94%,#bf3b24 95%,#c13a26 95%,#c13623 97%,#bd2e1e 98%,#bf2d20 98%,#bc2a1d 99%,#bb271b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #bd301f 0%,#c03322 0%,#bf3b24 3%,#c6462d 6%,#c6482f 7%,#ca5237 10%,#ca5237 11%,#cb5539 11%,#cb5539 12%,#cc563c 12%,#cd573d 12%,#ca573c 13%,#cd5a3f 13%,#ce5b40 14%,#cd5a3d 14%,#d05d40 15%,#d25f44 17%,#d46146 17%,#d26045 18%,#d46247 18%,#d46247 19%,#d5664a 20%,#db694e 25%,#d96a4e 25%,#dc6d51 26%,#dc6d51 28%,#e16f54 30%,#e77155 37%,#ee6d50 43%,#ed6c4f 45%,#ef694c 46%,#f16a4c 47%,#f16649 49%,#f16a4c 50%,#ef694c 52%,#ed6c4f 53%,#ed6d50 56%,#eb6f53 56%,#e77155 61%,#e47154 62%,#e37055 66%,#db6c50 72%,#d96a4e 72%,#d8694d 75%,#d36045 80%,#d15e43 81%,#d15e43 82%,#d05d40 82%,#ce5b3e 83%,#cf5c41 83%,#ca573c 85%,#cb5539 86%,#ca5237 86%,#ca5237 88%,#c6482f 91%,#c6462d 92%,#c4422a 93%,#c4422a 94%,#bf3b24 95%,#c13a26 95%,#c13623 97%,#bd2e1e 98%,#bf2d20 98%,#bc2a1d 99%,#bb271b 100%); /* IE10+ */
background: linear-gradient(to right, #bd301f 0%,#c03322 0%,#bf3b24 3%,#c6462d 6%,#c6482f 7%,#ca5237 10%,#ca5237 11%,#cb5539 11%,#cb5539 12%,#cc563c 12%,#cd573d 12%,#ca573c 13%,#cd5a3f 13%,#ce5b40 14%,#cd5a3d 14%,#d05d40 15%,#d25f44 17%,#d46146 17%,#d26045 18%,#d46247 18%,#d46247 19%,#d5664a 20%,#db694e 25%,#d96a4e 25%,#dc6d51 26%,#dc6d51 28%,#e16f54 30%,#e77155 37%,#ee6d50 43%,#ed6c4f 45%,#ef694c 46%,#f16a4c 47%,#f16649 49%,#f16a4c 50%,#ef694c 52%,#ed6c4f 53%,#ed6d50 56%,#eb6f53 56%,#e77155 61%,#e47154 62%,#e37055 66%,#db6c50 72%,#d96a4e 72%,#d8694d 75%,#d36045 80%,#d15e43 81%,#d15e43 82%,#d05d40 82%,#ce5b3e 83%,#cf5c41 83%,#ca573c 85%,#cb5539 86%,#ca5237 86%,#ca5237 88%,#c6482f 91%,#c6462d 92%,#c4422a 93%,#c4422a 94%,#bf3b24 95%,#c13a26 95%,#c13623 97%,#bd2e1e 98%,#bf2d20 98%,#bc2a1d 99%,#bb271b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd301f', endColorstr='#bb271b',GradientType=1 ); /* IE6-9 */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment