Mixin Background-gradient - SASS

/* USAGE: .sample { @include background-gradient(#000, #FFF, 'vertical'); } */ @mixin background-gradient($startColor, $endColor, $orientation: '') { background: $startColor; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $startColor, $endColor); background: linear-gradient(to bottom, $startColor, $endColor); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $startColor, $endColor); background: linear-gradient(to right, $startColor, $endColor); } @else { background: -webkit-radial-gradient(center, ellipse cover, $startColor, $endColor); background: radial-gradient(ellipse at center, $startColor, $endColor); } }

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.