Skip to content

Instantly share code, notes, and snippets.

@alvincrespo
Created December 5, 2012 15:40
Show Gist options
  • Save alvincrespo/4216671 to your computer and use it in GitHub Desktop.
Save alvincrespo/4216671 to your computer and use it in GitHub Desktop.
CSS3 Gradients with Background Images
/* Old browsers */
background: #a09e91;
background: url('path/to/image.png') no-repeat 0 0;
/* FF3.6+ */
background: url('path/to/image.png') no-repeat 0 0, -moz-linear-gradient(top, #ffffff 0%, #a09e91 75%);
/* Chrome,Safari4+ */
background: url('path/to/image.png') no-repeat 0 0, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(75%,#a09e91));
/* Chrome10+,Safari5.1+ */
background: url('path/to/image.png') no-repeat 0 0, -webkit-linear-gradient(top, #ffffff 0%,#a09e91 75%);
/* Opera 11.10+ */
background: url('path/to/image.png') no-repeat 0 0, -o-linear-gradient(top, #ffffff 0%,#a09e91 75%);
/* IE10+ */
background: url('path/to/image.png') no-repeat 0 0, -ms-linear-gradient(top, #ffffff 0%,#a09e91 75%);
/* W3C */
background: url('path/to/image.png') no-repeat 0 0, linear-gradient(to bottom, #ffffff 0%,#a09e91 75%);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment