<gradient>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

background: linear-gradient(#f69d3c, #3f87a6);

background: radial-gradient(#f69d3c, #3f87a6);

background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);

background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);

background: conic-gradient(#f69d3c, #3f87a6);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

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

構文

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

線形グラデーション

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

放射グラデーション

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

扇形グラデーション

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

反復グラデーション

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

補間

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

形式文法

<gradient> = 
  <linear-gradient()>            |
  <repeating-linear-gradient()>  |
  <radial-gradient()>            |
  <repeating-radial-gradient()>  

<linear-gradient()> = 
  linear-gradient( [ <linear-gradient-syntax> ] )  

<repeating-linear-gradient()> = 
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )  

<radial-gradient()> = 
  radial-gradient( [ <radial-gradient-syntax> ] )  

<repeating-radial-gradient()> = 
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ <angle> | <zero> | to <side-or-corner> ]? , <color-stop-list>  

<radial-gradient-syntax> = 
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>

例

線形グラデーションの例

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

<div class="linear-gradient">線形グラデーション</div>

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

css

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

放射グラデーションの例

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

<div class="radial-gradient">放射グラデーション</div>

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

css

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

扇形グラデーションの例

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

<div class="conic-gradient">扇形グラデーション</div>

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

css

.conic-gradient {
  background: conic-gradient(pink, coral, lime);
}

反復グラデーションの例

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

<div class="linear-repeat"></div>
<span>反復線形グラデーション</span>
<hr />
<div class="radial-repeat"></div>
<span>反復放射グラデーション</span>
<hr />
<div class="conic-repeat"></div>
<span>反復扇形グラデーション</span>

div {
  display: inline-block;
  width: 240px;
  height: 80px;
}

span {
  font-weight: bold;
  vertical-align: top;
}

css

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

.radial-repeat {
  background: repeating-radial-gradient(
    lime,
    lime 15px,
    white 15px,
    white 30px
  );
}

.conic-repeat {
  background: repeating-conic-gradient(lime, pink 30deg);
}

仕様書

Specification
CSS Images Module Level 4 # gradients