Skip to content

Instantly share code, notes, and snippets.

@SeanJA
Created September 21, 2012 14:50
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 SeanJA/3761926 to your computer and use it in GitHub Desktop.
Save SeanJA/3761926 to your computer and use it in GitHub Desktop.
Sunburst mixin for sass
@mixin sunburst($color) {
$color2: darken($color, 15%);
background: -webkit-gradient(linear, 90deg, 90deg, color-stop(50%, transparent), color-stop(50%, $color2), color-stop(100%, $color2)),
-webkit-gradient(linear, 82deg, 82deg, color-stop(50%, transparent), color-stop(50%, $color), color-stop(100%, $color)),
-webkit-gradient(linear, 67deg, 67deg, color-stop(50%, transparent), color-stop(50%, $color2), color-stop(100%, $color2)),
-webkit-gradient(linear, 52deg, 52deg, color-stop(50%, transparent), color-stop(50%, $color), color-stop(100%, $color)),
-webkit-gradient(linear, 37deg, 37deg, color-stop(50%, transparent), color-stop(50%, $color2), color-stop(100%, $color2)),
-webkit-gradient(linear, 22deg, 22deg, color-stop(50%, transparent), color-stop(50%, $color), color-stop(100%, $color)),
-webkit-gradient(linear, 7deg, 7deg, color-stop(50%, transparent), color-stop(50%, $color2), color-stop(100%, $color2)),
-webkit-gradient(linear, -8deg, -8deg, color-stop(50%, transparent), color-stop(50%, $color), color-stop(100%, $color)),
-webkit-gradient(linear, -23deg, -23deg, color-stop(50%, transparent), color-stop(50%, $color2), color-stop(100%, $color2)),
-webkit-gradient(linear, -38deg, -38deg, color-stop(50%, transparent), color-stop(50%, $color), color-stop(100%, $color)),
-webkit-gradient(linear, -53deg, -53deg, color-stop(50%, transparent), color-stop(50%, $color2), color-stop(100%, $color2)),
-webkit-gradient(linear, -68deg, -68deg, color-stop(50%, transparent), color-stop(50%, $color), color-stop(100%, $color)),
-webkit-gradient(linear, -83deg, -83deg, color-stop(50%, transparent), color-stop(50%, $color2), color-stop(100%, $color2));
background: -webkit-linear-gradient(90deg, transparent 50%, $color2 50%, $color2),
-webkit-linear-gradient(82deg, transparent 50%, $color 50%, $color),
-webkit-linear-gradient(67deg, transparent 50%, $color2 50%, $color2),
-webkit-linear-gradient(52deg, transparent 50%, $color 50%, $color),
-webkit-linear-gradient(37deg, transparent 50%, $color2 50%, $color2),
-webkit-linear-gradient(22deg, transparent 50%, $color 50%, $color),
-webkit-linear-gradient(7deg, transparent 50%, $color2 50%, $color2),
-webkit-linear-gradient(-8deg, transparent 50%, $color 50%, $color),
-webkit-linear-gradient(-23deg, transparent 50%, $color2 50%, $color2),
-webkit-linear-gradient(-38deg, transparent 50%, $color 50%, $color),
-webkit-linear-gradient(-53deg, transparent 50%, $color2 50%, $color2),
-webkit-linear-gradient(-68deg, transparent 50%, $color 50%, $color),
-webkit-linear-gradient(-83deg, transparent 50%, $color2 50%, $color2);
background: -moz-linear-gradient(90deg, transparent 50%, $color2 50%, $color2),
-moz-linear-gradient(82deg, transparent 50%, $color 50%, $color),
-moz-linear-gradient(67deg, transparent 50%, $color2 50%, $color2),
-moz-linear-gradient(52deg, transparent 50%, $color 50%, $color),
-moz-linear-gradient(37deg, transparent 50%, $color2 50%, $color2),
-moz-linear-gradient(22deg, transparent 50%, $color 50%, $color),
-moz-linear-gradient(7deg, transparent 50%, $color2 50%, $color2),
-moz-linear-gradient(-8deg, transparent 50%, $color 50%, $color),
-moz-linear-gradient(-23deg, transparent 50%, $color2 50%, $color2),
-moz-linear-gradient(-38deg, transparent 50%, $color 50%, $color),
-moz-linear-gradient(-53deg, transparent 50%, $color2 50%, $color2),
-moz-linear-gradient(-68deg, transparent 50%, $color 50%, $color),
-moz-linear-gradient(-83deg, transparent 50%, $color2 50%, $color2);
background: -o-linear-gradient(90deg, transparent 50%, $color2 50%, $color2),
-o-linear-gradient(82deg, transparent 50%, $color 50%, $color),
-o-linear-gradient(67deg, transparent 50%, $color2 50%, $color2),
-o-linear-gradient(52deg, transparent 50%, $color 50%, $color),
-o-linear-gradient(37deg, transparent 50%, $color2 50%, $color2),
-o-linear-gradient(22deg, transparent 50%, $color 50%, $color),
-o-linear-gradient(7deg, transparent 50%, $color2 50%, $color2),
-o-linear-gradient(-8deg, transparent 50%, $color 50%, $color),
-o-linear-gradient(-23deg, transparent 50%, $color2 50%, $color2),
-o-linear-gradient(-38deg, transparent 50%, $color 50%, $color),
-o-linear-gradient(-53deg, transparent 50%, $color2 50%, $color2),
-o-linear-gradient(-68deg, transparent 50%, $color 50%, $color),
-o-linear-gradient(-83deg, transparent 50%, $color2 50%, $color2);
background: linear-gradient(90deg, transparent 50%, $color2 50%, $color2),
linear-gradient(82deg, transparent 50%, $color 50%, $color),
linear-gradient(67deg, transparent 50%, $color2 50%, $color2),
linear-gradient(52deg, transparent 50%, $color 50%, $color),
linear-gradient(37deg, transparent 50%, $color2 50%, $color2),
linear-gradient(22deg, transparent 50%, $color 50%, $color),
linear-gradient(7deg, transparent 50%, $color2 50%, $color2),
linear-gradient(-8deg, transparent 50%, $color 50%, $color),
linear-gradient(-23deg, transparent 50%, $color2 50%, $color2),
linear-gradient(-38deg, transparent 50%, $color 50%, $color),
linear-gradient(-53deg, transparent 50%, $color2 50%, $color2),
linear-gradient(-68deg, transparent 50%, $color 50%, $color),
linear-gradient(-83deg, transparent 50%, $color2 50%, $color2);
background-position: center -100%;
background-color: $color;
background-size: 100% 200%;
min-height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment