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

linear-gradientのサンプルです。

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

linear-gradient

書き方 linear-gradient ([方向],最初の色 [位置,途中の色 位置],終了の色 [位置])
方向 1.グラデーションの角度(deg)を指定。省略可能。
0度の場合、値2の色が下から上に値3になり値4の色になります。
90度の場合、値2の色が左から右に値3になり値4の色になります。
180度の場合、値2の色が上から下に値3になり値4の色になります。
2.キーワードでの指定も可能。省略可能。
to top(0deg)、to right(90deg)、to bottom(180deg)、to left(270deg)
省略の場合は、上から下に色が変わります。
最初の色 位置 位置は省略可能。数値%
途中の色 位置 途中の色は、複数指定可能。途中の色自体の省略も可能。
位置は省略可能。数値%
終了の色 位置 位置は省略可能。数値%
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient

上から下にグラデーションする(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を使用します。

関連の記事

CSS3 透明度を指定するサンプル(opacity)
CSS radial-gradient 円のグラデーションのサンプル

△上に戻る