CSS3のグラデーションはブラウザごとの表示仕様が異なり、ベンダープレフィックスの付与が結構面倒です。
Compassで用意されている標準mixinを使うことで一括で出力できます。
Sassの記述は下記になります。
$red: #f00; .box { @include background-image(linear-gradient(top, lighten($red,30), $red)); @include filter-gradient(lighten($red,30), $red, vertical); //IE用の記述 }
グラデーションは暗い色から明るい色に変化するパターンが多いと思うので、ベースカラーに lighten をかける使い方がおすすめです。
CSSで下記のように出力されます。
.box { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff9999), color-stop(100%, #ff0000)); background-image: -webkit-linear-gradient(top, #ff9999, #ff0000); background-image: -moz-linear-gradient(top, #ff9999, #ff0000); background-image: -o-linear-gradient(top, #ff9999, #ff0000); background-image: linear-gradient(top, #ff9999, #ff0000); *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF9999', endColorstr='#FFFF0000'); }
後半2行は filter-gradient によるIE用の記述です。