repeating-radial-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.

repeating-radial-gradient() は CSS の関数で、原点から広がり反復するグラデーションから成る画像を生成します。 radial-gradient() と似ており、同じ引数を取りますが、 repeating-linear-gradient() と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は <gradient> データ型のオブジェクトであり、これは <image> の特殊型です。

試してみましょう

それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。 2 つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。

他のグラデーションと同じく、反復放射グラデーションも内在的な寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 repeating-radial-gradient() は background-color や、その他の <color> データ型を使用するプロパティでは動作しません。

構文

css

/* コンテナーの中央からのグラデーションで、
   赤で始まり、青に変化し、緑で終わり、
   それぞれ 30px ごとに色が繰り返される */
repeating-radial-gradient(circle at center, red 0, blue, green 30px)

/* 左上の角付近の楕円形のグラデーションで、
   赤で始まり、緑に変化し、また戻り、
   中央と右下の角の間で5回繰り返され、
   中央と左上の角の間は1回だけ */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%)

値

<position>

グラデーションの位置で、 background-position や transform-origin と同じ方法で解釈されます。指定されなかった場合、既定値は center です。

<shape>

グラデーションの形状です。 circle (グラデーションの形状が一定の半径の円の意味) か ellipse (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は ellipse です。

<extent-keyword>

終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。

キーワード	説明
`closest-side`	グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。
`closest-corner`	グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。
`farthest-side`	`closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。
`farthest-corner`	グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。

メモ: この関数の初期の実装では、他のキーワード (cover および contain) をそれぞれ標準の farthest-corner および closest-side の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。

<color-stop>

色経由点の <color> 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの <percentage> または <length>) です。 percentage が 0%、または length が 0 の場合は、グラデーションの中心を表します。 100% は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。

形式文法

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

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

<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> ]  

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

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

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

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

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

例

白と黒のグラデーション

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

.radial-gradient {
  width: 120px;
  height: 120px;
}

css

.radial-gradient {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}

最も遠い角

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

.radial-gradient {
  width: 240px;
  height: 120px;
}

css

.radial-gradient {
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red,
    black 5%,
    blue 5%,
    green 10%
  );
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red 0 5%,
    green 5% 10%
  );
}

楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。

色相での補間

<div class="shorter"></div>
<div class="longer"></div>

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

この補間処理の例では、 hsl 色系を使用して、色相を補間しています。

css

.shorter {
  background-image: repeating-radial-gradient(
    circle at center in hsl shorter hue,
    red 30px,
    blue 60px
  );
}

.longer {
  background-image: repeating-radial-gradient(
    circle at center in hsl longer hue,
    red 30px,
    blue 60px
  );
}

左のボックスは、 shorter の補間を使用しており、色相環の短い方の弧を使用して、色が赤から青に直接変化しているということになります。右のボックスは、 longer の補間を使用しており、色が赤から青に変化する際に、緑、黄、オレンジを通って変化しているということになります。

メモ: 他の例は CSS グラデーションの使用をご覧ください。

仕様書

Specification
CSS Images Module Level 3 # repeating-gradients

ブラウザーの互換性

BCD tables only load in the browser