<gradient>

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

試してみましょう

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

構文

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

線形グラデーション

線形グラデーション (linear gradient) は、色が仮想の直線に沿って変化します。 linear-gradient() 関数で生成されます。

放射グラデーション

放射グラデーション (radial gradient) は、色が中心点 (origin) から連続的に変化します。 radial-gradient() 関数で生成されます。

反復グラデーション

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

扇形グラデーション

扇形グラデーション (conic gradient) は、色が円を描くように連続的に変化します。 conic-gradient() 関数で生成されます。

補間

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

例

線形グラデーションの例

単純な線形グラデーションです。

<div class="linear-gradient">Linear gradient</div>

div {
  width: 240px;
  height: 80px;
}

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

放射グラデーションの例

単純な放射グラデーションです。

<div class="radial-gradient">Radial gradient</div>

div {
  width: 240px;
  height: 80px;
}

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

反復グラデーションの例

単純な線形および放射の反復グラデーションの例です。

<div class="linear-repeat">Repeating linear gradient</div>
<br>
<div class="radial-repeat">Repeating radial gradient</div>

div {
  width: 240px;
  height: 80px;
}

.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);
}

扇形グラデーションの例

単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。

<div class="conic-gradient">Conic gradient</div>

div {
  width: 200px;
  height: 200px;
}

.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}

仕様書

Specification
CSS Images Module Level 4 # gradients

ブラウザーの互換性

BCD tables only load in the browser