CSS<gradient> データ型は、2色以上の連続的な色の変化で構成される特殊な型の <image> です。

CSS グラデーションは固有の寸法を持ちません。つまり、自然又は推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。

構文

グラデーション関数

<gradient> データ型は、以下のリストにある関数型のうちの一つによって定義します。

線形 (linear) グラデーション

色が架空の直線に沿って変化します。 linear-gradient() 関数で生成されます。

.linear-gradient {
  background: linear-gradient(to right,
      red, orange, yellow, green, blue, indigo, violet);
}

放射状 (radical) グラデーション

色が中央点 (origin) から連続的に変化します。 radial-gradient() 関数で生成されます。

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

反復 (repeating) グラデーション

要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 repeating-linear-gradient() 及び repeating-radial-gradient() 関数で生成されます。

.linear-repeat {
  background: repeating-linear-gradient(to top left,
      lightpink, lightpink 5px, white 5px, white 10px);
}

.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}

補間

色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 transparent キーワードを使用するとこれを使用しないことがあるので注意してください。)

仕様書

仕様書 策定状況 コメント
CSS Images Module Level 3
<gradient> の定義
勧告候補 初回定義

ブラウザーの対応

グラデーション型によって対応状況が異なります。詳しくはそれぞれの方についての記事をご覧ください。

関連情報

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

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