Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

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 Image Values and Replaced Content Module Level 3
<gradient> の定義
勧告候補  

ブラウザ実装状況

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

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, wizAmit, slayslot, fscholz, ethertank, sosleepy
 最終更新者: yyss,