[CSS3]画像を使わずにCSSだけでグラデーションを実現する方法

画像を使わないで見出しの背景などのグラデーションをかける方法を紹介する。
FirefoxやChromeだけでなく、邪悪なIEにもちゃんと対応させるよ。

スタイルシート

.grad {
  background: -moz-linear-gradient(top, #ffffff, #0000ff); /* Firefox */
  background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#0000ff)); /* Chrome */
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffffff', endColorstr='#ffffff00'); /* IE */
}

HTML

<div class="grad">グラデーションテスト</div>

表示してみる。

グラデーションテスト