radial-gradient()【放射状グラデーション】関数
repeating-radial-gradient()【放射状グラデーション リピート】関数

メモ 外部リンク 構文 例

メモ

構文 (※記述方法)

構文説明
radial-gradient (
  [
       [ shape (最終形状) || size (形状サイズ) ]
       [ at 《position【位置】》 ]?,
    | at 《position【位置】》,
  ]?
  color-stop (カラーストップ)
  [ , color-stop (カラーストップ) ]+
)


最終形状・形状サイズ


始点の色
終点(中間点)の色
 
repeating-radial-gradient
戻り値《gradient【グラデーション画像】》background【背景】等に指定
shape (最終形状) circle【円】 | ellipse【楕円】
(省略：size (形状サイズ)が《length【長さ】》の場合、circle【円】
 その他の場合、ellipse【楕円】)
size (形状サイズ)    closest-corner【近い角】
| closest-side【近い辺】
| farthest-corner【遠い角】
| farthest-side【遠い辺】
| 《length【長さ】》
| [《length【長さ】》 | 《percentage【パーセンテージ】》]{2} 		circle【円】の場合
ellipse【楕円】の場合
color-stop (カラーストップ) 《color【色】》
[
     《percentage【パーセンテージ】》
  | 《length【長さ】》
]? 		色

位置

 

例

<style>
.ex1 { text-align: center; color: black; padding: 100px 10px; }

.exA1 { background: radial-gradient(circle, white, blue); }
.exA2 { background: radial-gradient(ellipse, white, blue); }

.exB1 { background: radial-gradient(circle 50px, white, blue); }
.exB2 { background: radial-gradient(ellipse 100px 50px, white, blue); }

.exC1 { background: radial-gradient(circle closest-side, white, blue); }
.exC2 { background: radial-gradient(ellipse closest-side, white, blue); }

.exD1 { background: radial-gradient(circle at top left, white, blue); }
.exD2 { background: radial-gradient(ellipse at bottom right, white, blue); }

.exE1 { background: radial-gradient(circle closest-side, white, blue 20%); }
.exE2 { background: radial-gradient(ellipse closest-side, white, blue 20%); }

.exF1 { background: radial-gradient(circle, white, blue, yellow); }
.exF2 { background: radial-gradient(ellipse, white, blue, yellow); }

.exG1 { background: radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet); }
.exG2 { background: radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet); }
</style>

<p class="ex1 exA1">(exA1) radial-gradient(circle, white, blue)</p>
<p class="ex1 exA2">(exA2) radial-gradient(ellipse, white, blue)</p>

<p class="ex1 exB1">(exB1) radial-gradient(circle 50px, white, blue)</p>
<p class="ex1 exB2">(exB2) radial-gradient(ellipse 100px 50px, white, blue)</p>

<p class="ex1 exC1">(exC1) radial-gradient(circle closest-side, white, blue)</p>
<p class="ex1 exC2">(exC2) radial-gradient(ellipse closest-side, white, blue)</p>

<p class="ex1 exD1">(exD1) radial-gradient(circle at top left, white, blue)</p>
<p class="ex1 exD2">(exD2) radial-gradient(ellipse at bottom right, white, blue)</p>

<p class="ex1 exE1">(exE1) radial-gradient(circle closest-side, white, blue 20%)</p>
<p class="ex1 exE2">(exE2) radial-gradient(ellipse closest-side, white, blue 20%)</p>

<p class="ex1 exF1">(exF1) radial-gradient(circle, white, blue, yellow)</p>
<p class="ex1 exF2">(exF2) radial-gradient(ellipse, white, blue, yellow)</p>

<p class="ex1 exG1">(exG1) radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet)</p>
<p class="ex1 exG2">(exG2) radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet)</p>

(exA1) radial-gradient(circle, white, blue)

(exA2) radial-gradient(ellipse, white, blue)

(exB1) radial-gradient(circle 50px, white, blue)

(exB2) radial-gradient(ellipse 100px 50px, white, blue)

(exC1) radial-gradient(circle closest-side, white, blue)

(exC2) radial-gradient(ellipse closest-side, white, blue)

(exD1) radial-gradient(circle at top left, white, blue)

(exD2) radial-gradient(ellipse at bottom right, white, blue)

(exE1) radial-gradient(circle closest-side, white, blue 20%)

(exE2) radial-gradient(ellipse closest-side, white, blue 20%)

(exF1) radial-gradient(circle, white, blue, yellow)

(exF2) radial-gradient(ellipse, white, blue, yellow)

(exG1) radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet)

(exG2) radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet)

<style>
.ex2 { text-align: center; color: black; padding: 100px 10px; }

.exRA1 { background: repeating-radial-gradient(circle, white, blue 20%); }
.exRA2 { background: repeating-radial-gradient(ellipse, white, blue 20%); }

.exRB1 { background: repeating-radial-gradient(circle 50px, white, blue); }
.exRB2 { background: repeating-radial-gradient(ellipse 100px 50px, white, blue); }

.exRC1 { background: repeating-radial-gradient(circle closest-side, white, blue); }
.exRC2 { background: repeating-radial-gradient(ellipse closest-side, white, blue 20%); }

.exRD1 { background: repeating-radial-gradient(circle at top left, white, blue 20%); }
.exRD2 { background: repeating-radial-gradient(ellipse at bottom right, white, blue 20%); }

.exRE1 { background: repeating-radial-gradient(circle closest-side, white, blue 20%); }
.exRE2 { background: repeating-radial-gradient(ellipse closest-side, white, blue 20%); }

.exRF1 { background: repeating-radial-gradient(circle, white, blue, yellow 20%); }
.exRF2 { background: repeating-radial-gradient(ellipse, white, blue, yellow 20%); }

.exRG1 { background: repeating-radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet 20%); }
.exRG2 { background: repeating-radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet 20%); }
</style>

<p class="ex2 exRA1">(exRA1) repeating-radial-gradient(circle, white, blue 20%)</p>
<p class="ex2 exRA2">(exRA2) repeating-radial-gradient(ellipse, white, blue 20%)</p>

<p class="ex2 exRB1">(exRB1) repeating-radial-gradient(circle 50px, white, blue)</p>
<p class="ex2 exRB2">(exRB2) repeating-radial-gradient(ellipse 100px 50px, white, blue)</p>

<p class="ex2 exRC1">(exRC1) repeating-radial-gradient(circle closest-side, white, blue)</p>
<p class="ex2 exRC2">(exRC2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)</p>

<p class="ex2 exRD1">(exRD1) repeating-radial-gradient(circle at top left, white, blue 20%)</p>
<p class="ex2 exRD2">(exRD2) repeating-radial-gradient(ellipse at bottom right, white, blue 20%)</p>

<p class="ex2 exRE1">(exRE1) repeating-radial-gradient(circle closest-side, white, blue 20%)</p>
<p class="ex2 exRE2">(exRE2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)</p>

<p class="ex2 exRF1">(exRF1) repeating-radial-gradient(circle, white, blue, yellow 20%)</p>
<p class="ex2 exRF2">(exRF2) repeating-radial-gradient(ellipse, white, blue, yellow 20%)</p>

<p class="ex2 exRG1">(exRG1) repeating-radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet 20%)</p>
<p class="ex2 exRG2">(exRG2) repeating-radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet 20%)</p>

(exRA1) repeating-radial-gradient(circle, white, blue 20%)

(exRA2) repeating-radial-gradient(ellipse, white, blue 20%)

(exRB1) repeating-radial-gradient(circle 50px, white, blue)

(exRB2) repeating-radial-gradient(ellipse 100px 50px, white, blue)

(exRC1) repeating-radial-gradient(circle closest-side, white, blue)

(exRC2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)

(exRD1) repeating-radial-gradient(circle at top left, white, blue 20%)

(exRD2) repeating-radial-gradient(ellipse at bottom right, white, blue 20%)

(exRE1) repeating-radial-gradient(circle closest-side, white, blue 20%)

(exRE2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)

(exRF1) repeating-radial-gradient(circle, white, blue, yellow 20%)

(exRF2) repeating-radial-gradient(ellipse, white, blue, yellow 20%)

(exRG1) repeating-radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet 20%)

(exRG2) repeating-radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet 20%)