Skip to content

Instantly share code, notes, and snippets.

@jensgro
Last active August 29, 2015 14:06
Show Gist options
  • Save jensgro/e5582c9f31c432ef8870 to your computer and use it in GitHub Desktop.
Save jensgro/e5582c9f31c432ef8870 to your computer and use it in GitHub Desktop.
Linear gradient with Compass
<div class="test"></div>
// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----
@import "compass";
.test {
@include background(linear-gradient(top, #a20000, #fd8700) );
}
.ie8 .test {
@include filter-gradient(#a20000, #fd8700, top);
}
.test {
padding: 150px;
width: 300px;
}
.test {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2EyMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZkODcwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a20000), color-stop(100%, #fd8700));
background: -moz-linear-gradient(top, #a20000, #fd8700);
background: -webkit-linear-gradient(top, #a20000, #fd8700);
background: linear-gradient(to bottom, #a20000, #fd8700);
}
.ie8 .test {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFA20000', endColorstr='#FFFD8700');
}
.test {
padding: 150px;
width: 300px;
}
<div class="test"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment