<gradient>

概要

CSS の <gradient> データ型は、2 色かそれ以上の色間を色が連続変化するような CSS の <image> を表します。CSS グラデーションは CSS の <color> ではなく、固有のサイズを持たない画像です。これは、画像本来のサイズや、優先されるサイズを持たないということです（アスペクト比についても同様です）。実際のサイズは、グラデーションの用いられる要素にマッチしたものになるでしょう。

グラデーションは 3 種類あります:

• 線形 (linear) グラデーション。linear-gradient() 関数で生成されます。架空の線に沿って色がスムーズに移り変わります。

  グラデーションによる虹
  

  body { 
  background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); 
  }

• 放射状 (radial) グラデーション。radial-gradient() 関数で生成されます。開始点から離れるほど、開始色から遠い色になります。

  放射状グラデーション
    

  body {
  background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
  }
  

• グラデーションの繰り返し。固定サイズの線形または放射状のグラデーショで、ボックス全体を埋めるのに必要なだけ繰り返されます。

  グラデーションの繰り返し
  

  body {
  background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
  background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
  }  

色の補間操作を含む他の事例と同じく、グラデーションは アルファ乗算済み (alpha-premultiplied) のカラースペースで計算されます。これは、色と透明度の両方が変化したときに、予期しない灰色の陰が現れることを防ぎます。

仕様

ブラウザ実装状況

グラデーションの種類ごとに状況表がわけられています。個別の記事をご覧ください。

関連情報

• CSS グラデーションの利用、<gradient>、linear-gradient()、radial-gradient()、repeating-linear-gradient()、repeating-radial-gradient()