gradient

概要

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

グラデーションには複数の種類があります:

  • 線形 (linear) グラデーション。linear-gradient() 関数で生成されます。架空の線に沿って色がスムーズに移り変わります。
    グラデーションによる虹
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    
  • 放射状 (radial) グラデーション。radial-gradient() 関数で生成されます。開始点から離れるほど、開始色から遠い色になります。
    放射状グラデーション
    background: radial-gradient(red, yellow, rgb(30, 144, 255));
    
  • グラデーションの繰り返し。固定サイズの線形または放射状のグラデーショで、ボックス全体を埋めるのに必要なだけ繰り返されます。
    グラデーションの繰り返し
    background: repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
    

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

仕様

仕様書 策定状況 コメント
CSS Image Values and Replaced Content Module Level 3 勧告候補  

ブラウザ実装状況

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

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す