実行例

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

CSSでグラデーション

実行例

解説

参考URL