Skip to content

Instantly share code, notes, and snippets.

@xav76
Created October 23, 2012 18:49
Show Gist options
  • Select an option

  • Save xav76/3940752 to your computer and use it in GitHub Desktop.

Select an option

Save xav76/3940752 to your computer and use it in GitHub Desktop.
A CodePen by Wan Salehuddin.
@import "compass";
html, body {
height: 100%;
}
body {
$bgStart: #fc3;
$bgEnd: #ed2b7a;
background-color: $bgEnd;
@include background-image(
linear-gradient(right,
rgba($bgStart,0) 10%,
rgba($bgStart,.1) 10%,
rgba($bgStart,.1) 20%,
rgba($bgStart,.2) 20%,
rgba($bgStart,.2) 30%,
rgba($bgStart,.3) 30%,
rgba($bgStart,.3) 40%,
rgba($bgStart,.4) 40%,
rgba($bgStart,.4) 50%,
rgba($bgStart,.5) 50%,
rgba($bgStart,.5) 60%,
rgba($bgStart,.6) 60%,
rgba($bgStart,.6) 70%,
rgba($bgStart,.7) 70%,
rgba($bgStart,.7) 80%,
rgba($bgStart,.8) 80%,
rgba($bgStart,.8) 90%,
rgba($bgStart,.9) 90%,
rgba($bgStart,.9) 100%,
rgba($bgStart,1) 100%),
linear-gradient(top,
rgba($bgStart,0) 20%,
rgba($bgStart,.11) 20%,
rgba($bgStart,.22) 40%,
rgba($bgStart,.33) 40%,
rgba($bgStart,.44) 60%,
rgba($bgStart,.55) 60%,
rgba($bgStart,.66) 80%,
rgba($bgStart,.77) 80%,
rgba($bgStart,.88) 100%,
rgba($bgStart,1) 100%));
@include background-size(100% 100%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment