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

CSSのlinear-gradient関数で、線をグラデーションするサンプルです。

確認環境
・Google Chrome

目次

仕様 linear-gradient関数の仕様
サンプル linear-gradientのサンプル
  線のグラデーション+色の停止の位置を追加するサンプル
仕様 repeating-linear-gradient関数の仕様
サンプル repeating-linear-gradientのサンプル

linear-gradient関数の仕様

linear-gradient (値1,値2,値3,値4)

linear-gradient関数は、線をグラデーションします。

引数は、4つあります。

説明
値1(方向) 1.グラデーションの角度(deg)を指定します。
0度の場合、最初の色(値2)が下で終了の色(値4)が上です。
90度の場合、最初の色(値2)が左で終了の色(値4)が右です。
180度の場合、最初の色(値2)が上で終了の色(値4)が下です。
270度の場合、最初の色(値2)が右で終了の色(値4)が左です。
2.キーワードでの指定も可能です。
to top、to right、to bottom、to leftはそれぞれ角度 0deg、90deg、180deg、270degに変換されます
値2(最初の色と停止の位置) 色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る)
位置は、数値+単位または数値%で表します。
位置は省略可能です。
値3(途中の色と停止の位置) 色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る)
途中の色は、複数指定可能です。途中の色自体の省略も可能です。
位置は、数値+単位または数値%で表します。
位置は省略可能です。
値4(終了の色と停止の位置) 色と停止の位置(カラーストップ)を指定します。(半角スペースで区切る)
位置は、数値+単位または数値%で表します。
位置は省略可能です。

linear-gradientのサンプル

linear-gradientのサンプルです。
指定した色から色へ線状にグラデーションします。

test1
30deg,DeepPink,Aqua,Gold
test2
0deg,DeepPink,Aqua
test3
90deg,DeepPink,Aqua
test4
180deg,DeepPink,Aqua
test5
270deg,DeepPink,Aqua

コード

上記サンプルのコードです。

<style>
#test1{
	background:linear-gradient(30deg,DeepPink,Aqua,Gold);
}
#test2{
	background:linear-gradient(0deg,DeepPink,Aqua);
}
#test3{
	background:linear-gradient(90deg,DeepPink,Aqua);
}
#test4{
	background:linear-gradient(180deg,DeepPink,Aqua);
}
#test5{
	background:linear-gradient(270deg,DeepPink,Aqua);
}
.c1 div{ width:300px;border: 1px solid #000;
height:50px;text-align: center;margin-bottom:20px;}
</style>
<body>
<div class="c1">
	<div id="test1">test1<br>30deg,DeepPink,Aqua,Gold</div>
	<div id="test2">test2<br>0deg,DeepPink,Aqua</div>
	<div id="test3">test3<br>90deg,DeepPink,Aqua</div>
	<div id="test4">test4<br>180deg,DeepPink,Aqua</div>
	<div id="test5">test5<br>270deg,DeepPink,Aqua</div>
</div>
</body>

test1は、値を4つ(角度(deg)、最初の色、途中の色、終了の色)指定しています。
test2からtest5までは角度(deg)をそれぞれ0,90,180,270とし、途中の色は省略しています。

線のグラデーション+色の停止の位置を追加するサンプル

線のグラデーション+色の停止の位置を追加するサンプルです。

test1
30deg,DeepPink 10%,Aqua 20%,Gold 100%
test2
30deg,DeepPink 80%,Aqua 90%,Gold 100%

コード

上記サンプルのコードです。

<style>
#test10{
	background:linear-gradient(30deg,DeepPink 10%,Aqua 20%,Gold 100%);
}
#test11{
	background:linear-gradient(30deg,DeepPink 80%,Aqua 90%,Gold 100%);
}
.c2 div{ width:300px;border: 1px solid #000;
height:150px;text-align: center;margin-bottom:20px;}
</style>
<body>
<div class="c2">
	<div id="test10">test1<br>30deg,DeepPink 10%,Aqua 20%,Gold 100%</div>
	<div id="test11">test2<br>30deg,DeepPink 80%,Aqua 90%,Gold 100%</div>
</div>
</body>

3,6行目は、%で停止の位置を指定しています。
色と停止の位置の間は半角スペースで区切ります。

repeating-linear-gradient関数の仕様

repeating-linear-gradientのサンプル

repeating-linear-gradient関数のサンプルです。
線のグラデーションを繰り返して表示します。

test1
30deg,DeepPink 2%,Aqua 5%,Gold 8%
test2
30deg,DeepPink 20%,Aqua 50%,Gold 80%

コード

上記サンプルのコードです。

<style>
#test20{
background:repeating-linear-gradient(30deg,DeepPink 2%,Aqua 5%,Gold 8%);
		
}
#test21{
background:repeating-linear-gradient(30deg,DeepPink 20%,Aqua 50%,Gold 80%);
}
.c3 div{ width:300px;border: 1px solid #000;
height:150px;text-align: center;margin-bottom:20px;}
</style>
<body>
<div class="c3">
	<div id="test20">test1<br>30deg,DeepPink 2%,Aqua 5%,Gold 8%</div>
	<div id="test21">test2<br>30deg,DeepPink 20%,Aqua 50%,Gold 80%</div>
</div>
</body>

関連の記事

CSS border-radius 四角の角を丸くするサンプル
CSS box-shadow ボックスに影をつけるサンプル
CSS text-shadow 文字に影をつけるサンプル
CSS3 透明度を指定するサンプル(opacity)
CSS radial-gradient 円のグラデーションのサンプル

△上に戻る