sata-cross-gradient($start-color, $end-color, $orientation: vertical)

Cross browser gradient. Only two colors with direction.

$start-color - start color
$end-color - end color
$orientation - vertical or horizontal direction

Examples

Vertical gradient

Source

#sata-image-example {
	@include sata-cross-gradient(#24909d, #520000);
}

Result

#sata-image-example {
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #24909d), color-stop(100%, #520000));
	background-image: -webkit-linear-gradient(top, #24909d, #520000);
	background-image: -moz-linear-gradient(top, #24909d, #520000);
	background-image: -o-linear-gradient(top, #24909d, #520000);
	background-image: linear-gradient(top, #24909d, #520000);
	*zoom: 1;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF24909D', endColorstr='#FF520000');
}

Horizontal gradient

Source

#sata-image-example {
	@include sata-cross-gradient(#24909d, #520000, horizontal);
}

Result

#sata-image-example {
	background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #24909d), color-stop(100%, #520000));
	background-image: -webkit-linear-gradient(left, #24909d, #520000);
	background-image: -moz-linear-gradient(left, #24909d, #520000);
	background-image: -o-linear-gradient(left, #24909d, #520000);
	background-image: linear-gradient(left, #24909d, #520000);
	*zoom: 1;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF24909D', endColorstr='#FF520000');
}