CSS linear-gradient 線のグラデーションのサンプル

説明	linear-gradient
サンプル	上から下にグラデーションする(2色)
	上から下にグラデーションする(3色)
	上から下にグラデーション+色の位置を追加
	上から下にグラデーションなしで並べる
	真ん中に横線のイメージ
	左から右にグラデーションする
	グラデーションを繰り返す

linear-gradient

linear-gradientは、線のグラデーションを表示します。

linear-gradient ([方向],最初の色 [位置,途中の色位置],終了の色 [位置])

値は以下を設定します。

方向	１．グラデーションの角度(deg)を指定。省略可能。 0度の場合、値2の色が下から上に値3になり値4の色になります。 90度の場合、値2の色が左から右に値3になり値4の色になります。 180度の場合、値2の色が上から下に値3になり値4の色になります。
	２．キーワードでの指定も可能。省略可能。 to top(0deg)、to right(90deg)、to bottom(180deg)、to left(270deg)
	省略の場合は、上から下に色が変わります。
最初の色位置	位置は省略可能。数値%
途中の色位置	途中の色は、複数指定可能。途中の色自体の省略も可能。位置は省略可能。数値%
終了の色位置	位置は省略可能。数値%

上から下にグラデーションする(2色)

offset-x

<style>
  .test1 {
    background: linear-gradient(DeepPink, Gold);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

上から下にグラデーションする(3色)

offset-x

<style>
  .test1 {
    background: linear-gradient(DeepPink, Gold, Aqua);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

上から下にグラデーション+色の位置を追加

offset-x

<style>
  .test1 {
    background: linear-gradient(DeepPink 10%, Gold 30%, Aqua 80%);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

赤の高さが狭く青の高さが広くなっています。

上から下にグラデーションなしで並べる

offset-x

<style>
  .test1 {
    background: linear-gradient(DeepPink 25%, Gold 25% 50%,Lime 50% 75%, Aqua 75%);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

位置の数値を続けて書くとグラデーションがなくなります。

真ん中に横線のイメージ

<style>
  .test1 {
    background: linear-gradient(Black 10%, Gray 50%, Black 80%);
    width: 300px;
    height: 20px;
  }
</style>
<div class="test1"></div>

最初と最後の色を同じにして位置を指定します。

左から右にグラデーションする

offset-x

<style>
  .test1 {
    background: linear-gradient(to right, DeepPink, Gold);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

to rightで右から左へ色を変えています。90degと同じです。

グラデーションを繰り返す

offset-x

<style>
  .test1 {
    background: repeating-linear-gradient(DeepPink 25%, Gold 45%);
    width: 300px;
    height: 50px;
  }
</style>
<div class="test1">offset-x</div>

repeating-linear-gradientを使用します。