実行例
CSS（CSS3）だけでグラデーションをつけられます。
コードは下記の通り。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.bg-grad
{
width: 400px;
height: 150px;
padding: 25px;
border: 5px solid #000000;
background: #000099;
/* Webkit系 */
background: -webkit-gradient(linear, left top, left bottom, from(#ccccff), to(#000066));
/* Mozilla系 */
background: -moz-linear-gradient(top, #ccccff, #000066);
/* IE10+ */
background: -ms-linear-gradient(top, #ccccff, #000066);
/* IE8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=0)";
/* IE5.5-7 */
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=0); */
}
</style>
</head>
<body>
<p class="bg-grad">グラデーション</p>
</body>
</html>
解説
ブラウザーによって、指定方法が異なります。
- webkit は Chrome、Safari
- moz は Firefox
- ms は IE
さらに IE の場合、
- IE10 以降は
background: -ms-linear-gradient ... - IE8、9 は
-ms-filter: "progid:DXImageTransform ... - IE5.5～7 は
filter: progid:DXImageTransform ...
と分かれます。ただし、filter: は新しいIEでも解釈されるため、-ms-filter: と filter: を同時指定するのはあまり意味がないそうです。
「じゃあ filter: だけ指定すればいいのでは？」とも思いますが、filter: はCSSの正しい書式（ 属性:値; ）に従っておらず、コロンが２回登場します。そのため、ブラウザーによってはスタイルが崩れる危険性があるため、使用は控えたほうがいいそうです。-ms-filter: のほうはダブルクォーテーションで囲む書式に改良されたため問題ありません。
ちなみに、左から右へのグラデーションはこんな感じ。
/* Webkit系 */
background: -webkit-gradient(linear, left top, right top, from(#ccccff), to(#000066));
/* Mozilla系 */
background: -moz-linear-gradient(left, #ccccff, #000066);
/* IE10+ */
background: -ms-linear-gradient(left, #ccccff, #000066);
/* IE8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=1)";
/* IE5.5-7 */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ccccff', endColorstr='#000066', GradientType=1);
参考URL
画像を使わないで、CSSを使ってグラデーションする！！（IE対応）
http://infinityforest.net/home/archives/830
-ms-filterは無意味
http://sayurin.blogspot.jp/2012/12/ms-filter.html