@mixin gradient($one, $two, $direction) { $deg: if($direction == 'top', 45deg, -45deg); $word: if($direction == 'top', bottom, top); $opposite: if($direction == 'top', top, bottom); background: $one; background: -moz-linear-gradient($deg, $one 0%, $two 100%); background: -webkit-gradient(left $word, right $opposite, color-stop(0%, $one), color-stop(100%, $two)); background: -webkit-linear-gradient($deg, $one 0%, $two 100%); background: -o-linear-gradient($deg, $one 0%, $two 100%); background: -ms-linear-gradient($deg, $one 0%, $two 100%); background: linear-gradient($deg, $one 0%, $two 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str($one)}', endColorstr='#{ie_hex_str($two)}', GradientType=1 ); } @mixin linear-gradient($color) { $lighten: lighten($color, 10); background: $color; background: -moz-linear-gradient(top, $color 0%, $lighten 100%); background: -webkit-linear-gradient(top, $color 0%, $lighten 100%); background: linear-gradient(to bottom, $color 0%, $lighten 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str($color)}', endColorstr='#{ie_hex_str($lighten)}', GradientType=0 ); } @mixin radial-gradient($color) { $lighten: lighten($color, 35); background: $lighten; background: -moz-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $lighten), color-stop(100%, $color)); background: -webkit-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%); background: -o-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%); background: -ms-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%); background: radial-gradient(ellipse at center, $lighten 0%, $color 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str($lighten)}', endColorstr='#{ie_hex_str($color)}', GradientType=1 ); }