linear-gradient()【線形グラデーション】関数
repeating-linear-gradient()【線形グラデーション リピート】関数

メモ 外部リンク 構文 例

メモ

構文 (※記述方法)

構文説明
linear-gradient
(終点位置以降は終点の色) 		(
  [
    [
        《angle【角度】》
      | to 《side-or-corner【辺・角】》
    ] ,
  ]?
     《color-stop【カラーストップ】》
  [, 《color-stop【カラーストップ】》]+
)


方向 (角度指定)
方向 (辺 または 角 指定)


始点の色(と位置)
終点(中間点)の色(と位置)

repeating-linear-gradient
(終点位置までをリピート)
戻り値《gradient【グラデーション画像】》background【背景】等に指定
《side-or-corner【辺・角】》       [ left【左】 | right【右】 ]
|| [ top【上】 | bottom【下】 ] 		始点・中間点・終点 となる辺 または 角
(2つ指定すれば角)
《color-stop【カラーストップ】》 《color【色】》
[
     《percentage【パーセンテージ】》
  | 《length【長さ】》
]? 		色

位置

 

例

<style>
.exA1 { background: linear-gradient(white, blue);
        text-align:center; color:white; padding:10px; }
.exA2 { background: linear-gradient(to top, white, blue);
        text-align:center; color:white; padding:10px; }
.exA3 { background: linear-gradient(white, blue, white);
        text-align:center; color:white; padding:10px; }

.exB1 { background: linear-gradient(to right, white, blue);
        text-align:center; color:white; padding:10px; }
.exB2 { background: linear-gradient(to left, white, blue);
        text-align:center; color:white; padding:10px; }
.exB3 { background: linear-gradient(to right, white, blue, white);
        text-align:center; color:white; padding:10px; }
.exB4 { background: linear-gradient(to right, white, blue 20%);
        text-align:center; color:white; padding:10px; }

.exC1 { background: linear-gradient(to right top, white, blue);
        text-align:center; color:white; padding:150px 10px; }
.exC2 { background: linear-gradient(to left top, white, blue);
        text-align:center; color:white; padding:150px 10px; }
.exC3 { background: linear-gradient(to right top, white, blue, white);
        text-align:center; color:white; padding:150px 10px; }
.exC4 { background: linear-gradient(to left top, white, blue, white);
        text-align:center; color:white; padding:150px 10px; }

.exD1 { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        text-align:center; color:white; padding:20px 10px; }
</style>

<p class="exA1">(exA1) linear-gradient(white, blue)【上 → 下】</p>
<p class="exA2">(exA2) linear-gradient(to top, white, blue)【下 → 上】</p>
<p class="exA3">(exA3) linear-gradient(white, blue, white)【上 → 下 (中間点)】</p>

<p class="exB1">(exB1) linear-gradient(to right, white, blue)【左 → 右】</p>
<p class="exB2">(exB2) linear-gradient(to left, white, blue)【右 → 左】</p>
<p class="exB3">(exB3) linear-gradient(to right, white, blue, white)【左 → 右 (中間点)】</p>
<p class="exB4">(exB4) linear-gradient(to right, white, blue 20%)【左 → 右 (終点は20%の位置 以降は同色)】</p>

<p class="exC1">(exC1) linear-gradient(to right top, white, blue)【左下 → 右上】</p>
<p class="exC2">(exC2) linear-gradient(to left top, white, blue)【右下 → 左上】</p>
<p class="exC3">(exC3) linear-gradient(to right top, white, blue)【左下 → 右上 (中間点)】</p>
<p class="exC4">(exC4) linear-gradient(to left top, white, blue)【右下 → 左上 (中間点)】</p>

<p class="exD1">(exD1) linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)【左 → 右 (７色)】</p>

(exA1) linear-gradient(white, blue)【上 → 下】

(exA2) linear-gradient(to top, white, blue)【下 → 上】

(exA3) linear-gradient(white, blue, white)【上 → 下 (中間点)】

(exB1) linear-gradient(to right, white, blue)【左 → 右】

(exB2) linear-gradient(to left, white, blue)【右 → 左】

(exB3) linear-gradient(to right, white, blue, white)【左 → 右 (中間点)】

(exB4) linear-gradient(to right, white, blue 20%)【左 → 右 (終点は20%の位置 以降は同色)】

(exC1) linear-gradient(to right top, white, blue)【左下 → 右上】

(exC2) linear-gradient(to left top, white, blue)【右下 → 左上】

(exC3) linear-gradient(to right top, white, blue)【左下 → 右上 (中間点)】

(exC4) linear-gradient(to left top, white, blue)【右下 → 左上 (中間点)】

(exD1) linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)【左 → 右 (７色)】

<style>
.exRA1 { background: repeating-linear-gradient(white, blue 50%);
        text-align:center; color:white; padding:10px; }
.exRA2 { background: repeating-linear-gradient(to top, white, blue 50%);
        text-align:center; color:white; padding:10px; }
.exRA3 { background: repeating-linear-gradient(white, blue 25%, white 50%);
        text-align:center; color:white; padding:10px; }

.exRB1 { background: repeating-linear-gradient(to right, white, blue 20%);
        text-align:center; color:white; padding:10px; }
.exRB2 { background: repeating-linear-gradient(to left, white, blue 20%);
        text-align:center; color:white; padding:10px; }
.exRB3 { background: repeating-linear-gradient(to right, white, blue 10%);
        text-align:center; color:white; padding:10px; }
.exRB4 { background: repeating-linear-gradient(to right, white, blue 10%, white 20%);
        text-align:center; color:white; padding:10px; }

.exRC1 { background: repeating-linear-gradient(45deg, white, blue 20%);
        text-align:center; color:white; padding:150px 10px; }
.exRC2 { background: repeating-linear-gradient(-45deg, white, blue 20%);
        text-align:center; color:white; padding:150px 10px; }
.exRC3 { background: repeating-linear-gradient(45deg, white, blue 10%, white 20%);
        text-align:center; color:white; padding:150px 10px; }
.exRC4 { background: repeating-linear-gradient(-45deg, white, blue 10%, white 20%);
        text-align:center; color:white; padding:150px 10px; }

.exRD1 { background: repeating-linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet 20%);
        text-align:center; color:white; padding:20px 10px; }
</style>

<p class="exRA1">(exRA1) repeating-linear-gradient(white, blue 50%)【上 → 下】</p>
<p class="exRA2">(exRA2) repeating-linear-gradient(to top, white, blue 50%)【下 → 上】</p>
<p class="exRA3">(exRA3) repeating-linear-gradient(white, blue 25%, white 50%)【上 → 下 (中間点)】</p>

<p class="exRB1">(exRB1) repeating-linear-gradient(to right, white, blue 20%)【左 → 右 (20%)】</p>
<p class="exRB2">(exRB2) repeating-linear-gradient(to left, white, blue 20%)【右 → 左 (20%)】</p>
<p class="exRB3">(exRB3) repeating-linear-gradient(to right, white, blue 10%)【左 → 右 (10%)】</p>
<p class="exRB4">(exRB4) repeating-linear-gradient(to right, white, blue 10%, white 20%)【左 → 右 (中間点 10% 20%)】</p>

<p class="exRC1">(exRC1) repeating-linear-gradient(deg45, white, blue 20%)【45度 20%】</p>
<p class="exRC2">(exRC2) repeating-linear-gradient(-45deg, white, blue 20%)【-45度 20%】</p>
<p class="exRC3">(exRC3) repeating-linear-gradient(deg45, white, blue 20%)【45度 10% 20%】</p>
<p class="exRC4">(exRC4) repeating-linear-gradient(-45deg, white, blue 20%)【-45度 10% 20%】</p>

<p class="exRD1">(exRD1) repeating-linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet 20%)【左 → 右 (７色 20%)】</p>

(exRA1) repeating-linear-gradient(white, blue 50%)【上 → 下】

(exRA2) repeating-linear-gradient(to top, white, blue 50%)【下 → 上】

(exRA3) repeating-linear-gradient(white, blue 25%, white 50%)【上 → 下 (中間点)】

(exRB1) repeating-linear-gradient(to right, white, blue 20%)【左 → 右 (20%)】

(exRB2) repeating-linear-gradient(to left, white, blue 20%)【右 → 左 (20%)】

(exRB3) repeating-linear-gradient(to right, white, blue 10%)【左 → 右 (10%)】

(exRB4) repeating-linear-gradient(to right, white, blue 10%, white 20%)【左 → 右 (中間点 10% 20%)】

(exRC1) repeating-linear-gradient(deg45, white, blue 20%)【45度 20%】

(exRC2) repeating-linear-gradient(-45deg, white, blue 20%)【-45度 20%】

(exRC3) repeating-linear-gradient(deg45, white, blue 20%)【45度 10% 20%】

(exRC4) repeating-linear-gradient(-45deg, white, blue 20%)【-45度 10% 20%】

(exRD1) repeating-linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet 20%)【左 → 右 (７色 20%)】