CSSのグラデーションを使用する

2023.02.19

HTML・CSS

CSSのグラデーションの設定方法に関して、あらためてまとめてみます。

線形グラデーション

CSSのグラデションは線形グラデーション(linear-gradient())、放射グラデーション(radial-gradient())、扇形グラデーション(conic-gradient())の3種類です。
まずは線形グラデーションを試してみます。

<div class="sample sample-basic"></div>

線形グラデーションの設定にはlinear-gradient()を使い、引数にグラデーションで使用する色を指定します。

.sample {
	width: 200px;
	height: 200px;
}
.sample-basic {
	background-image: linear-gradient(red, blue);
}

これで上(red)から下(blue)へのグラデーションの設定ができました。
線形グラデーションのデモページ

グラデーションの方向を指定する場合、第一引数に方向の指定を行います。

<div class="sample sample-right">右方向へ</div>
<div class="sample sample-right-bottom">右下方向へ</div>
<div class="sample sample-0deg">上方向へ(0deg)</div>
<div class="sample sample-45deg">右上方向へ(45deg)</div>

「to right」や「to bottom right」といった文字列の指定や、degを使った角度での指定などができます。

.sample-right {
	background-image: linear-gradient(to right, red, blue);
}
.sample-right-bottom {
	background-image: linear-gradient(to bottom right, red, blue);
}
.sample-0deg {
	background-image: linear-gradient(0deg, red, blue);
}
.sample-45deg {
	background-image: linear-gradient(45deg, red, blue);
}

0degの場合は下から上へのグラデーションになり、そこから数値を増やすと時計回りに角度が移動します。
線形グラデーションのデモページ2

ここまでは2色でのグラデーションの設定でしたが、色数を増やしたり各色の位置を指定することもできます。

<div class="sample sample1">4色の設定</div>
<div class="sample sample2">左から25%の位置までが赤、そこから50%の位置で黄色、75%の位置でピンク、右端で青に変わるグラデーション</div>
<div class="sample sample3">左半分が赤、右半分が青</div>
<div class="sample sample4">左から赤、黄色、ピンク、青の4等分</div>

色の位置を指定する場合、半角スペースを開けて%やpxで位置の指定をします。

.sample1 {
	background-image: linear-gradient(to right, red, yellow, pink, blue);
}
.sample2 {
	background-image: linear-gradient(to right, red 25%, yellow 50%, pink 75%, blue 100%);
}
.sample3 {
	background-image: linear-gradient(to right, red 50%, blue 50%);
}
.sample4 {
	background-image: linear-gradient(to right, red 25%, yellow 25%, yellow 50%, pink 50%, pink 75%, blue 75%, blue 100%);
}

指定方法によってはサンプル3や4のように、グラデーションではなくべた塗りのような設定もできます。
線形グラデーションのデモページ3

グラデーションは透明度も対応しているので、グラデーションを複数指定して重ね合わせることもできます。

<div class="sample sample1">設定1</div>
<div class="sample sample2">設定2</div>
<div class="sample sample3">設定3</div>
<div class="sample sample4">3つの重ね合わせ</div>

.sample1 {
	background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%);
}
.sample2 {
	background-image: linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%);
}
.sample3 {
	background-image: linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
.sample4 {
	background-image:
		linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
		linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
		linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

線形グラデーションのデモページ4

放射グラデーション

次に放射グラデーションを試してみます。
放射グラデーションは指定位置から放射状にグラデーションが広がります。

<div class="sample sample-basic"></div>

放射グラデーションの設定にはradial-gradient()を使います。

.sample {
	width: 400px;
	height: 200px;
}
.sample-basic {
	background-image: radial-gradient(red, blue);
}

放射グラデーションのデモページ

上記例では長方形の要素に対して楕円形のグラデーションになりましたが、形状の指定もできます。
指定できる値はcircle(正円)かellipse(楕円)で、初期値はellipseになります。

<div class="sample sample-ellipse"></div>
<div class="sample sample-circle"></div>

.sample-ellipse {
	background-image: radial-gradient(ellipse, red, blue);
}
.sample-circle {
	background-image: radial-gradient(circle, red, blue);
}

放射グラデーションのデモページ2

上の2つのデモでは要素の中心位置からグラデーションが始まりましたが、グラデーションの開始位置を指定することもできます。

<div class="sample sample-left-bottom">左下を中心</div>
<div class="sample sample-right-top">右上を中心</div>

atの後に半角スペースで開けて、数値やキーワードでの指定を行います。

.sample-left-bottom {
	background-image: radial-gradient(at 0% 100%, red, blue);
}
.sample-right-top {
	background-image: radial-gradient(at right top, red, blue);
}

放射グラデーションのデモページ3

次に大きさの指定について試してみます。
指定できる値にはclosest-side、closest-corner、farthest-side、farthest-cornerがあり、初期値はfarthest-cornerになります。

<div class="sample sample1">closest-side</div>
<div class="sample sample2">closest-corner</div>
<div class="sample sample3">farthest-side</div>
<div class="sample sample4">farthest-corner</div>

違いを比べられるように、形状の指定がellipse(楕円)の場合とcircle(正円)の場合をそれぞれ試してみます。
まずはellipse(楕円)の場合です。

.sample1 {
	background-image: radial-gradient(closest-side, red, blue);
}
.sample2 {
	background-image: radial-gradient(closest-corner, red, blue);
}
.sample3 {
	background-image: radial-gradient(farthest-side, red, blue);
}
.sample4 {
	background-image: radial-gradient(farthest-corner, red, blue);
}

放射グラデーションのデモページ4

次にcircle(正円)の場合です。

.sample1 {
	background-image: radial-gradient(circle closest-side, red, blue);
}
.sample2 {
	background-image: radial-gradient(circle closest-corner, red, blue);
}
.sample3 {
	background-image: radial-gradient(circle farthest-side, red, blue);
}
.sample4 {
	background-image: radial-gradient(circle farthest-corner, red, blue);
}

放射グラデーションのデモページ5

それぞれの値の効果は以下の通りです。

closest-side	円の中心から最も近い辺に内接する。
closest-corner	円の中心から最も近い角に内接する。
farthest-side	円の中心から最も遠い辺に内接する。
farthest-corner	円の中心から最も遠い角に内接する。

線形グラデーションの時と同じく、グラデーションを複数指定して重ね合わせることもできます。

<div class="sample sample1">設定1</div>
<div class="sample sample2">設定2</div>
<div class="sample sample3">設定3</div>
<div class="sample sample4">3つの重ね合わせ</div>

.sample1 {
	background-image: radial-gradient(circle at 50% 0, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%);
}
.sample2 {
	background-image: radial-gradient(circle at 6.7% 75%, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%);
}
.sample3 {
	background-image: radial-gradient(circle at 93.3% 75%, rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
}
.sample4 {
	background-image:
		radial-gradient(circle at 50% 0, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
		radial-gradient(circle at 6.7% 75%, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
		radial-gradient(circle at 93.3% 75%, rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
}

放射グラデーションのデモページ6

扇形グラデーション

次に扇形グラデーションを試してみます。
扇形グラデーションは指定位置の周りを回りながらグラデーションが広がります。

<div class="sample sample-basic"></div>

扇形グラデーションの設定にはconic-gradient()を使います。

.sample-basic {
	background-image: conic-gradient(red, blue);
}

扇形グラデーションのデモページ

グラデーション開始の角度も指定できます。

<div class="sample sample-0deg">0deg</div>
<div class="sample sample-45deg">45deg</div>

fromの後に半角スペースで開けて、単位がdegの数値で指定を行います。

.sample-0deg {
	background-image: conic-gradient(from 0deg, red, blue);
}
.sample-45deg {
	background-image: conic-gradient(from 45deg, red, blue);
}

0degの場合は上から始まるグラデーションになり、そこから数値を増やすと時計回りに角度が移動します。
扇形グラデーションのデモページ2

グラデーションの中心位置の変更もできます。

<div class="sample sample-left-bottom">左下を中心</div>
<div class="sample sample-right-top">右上を中心</div>

放射グラデーションの時と同じく、atの後に半角スペースで開けて、数値やキーワードでの指定を行います。

.sample-left-bottom {
	background-image: conic-gradient(at 10% 90%, red, blue);
}
.sample-right-top {
	background-image: conic-gradient(from 225deg at right top, red, blue);
}

扇形グラデーションのデモページ3

反復グラデーション

最後に今までのグラデーションの繰り返し(反復グラデーション)を試してみます。
まずは線形グラデーションの反復で、repeating-linear-gradient()を使用します。

<div class="sample sample1"></div>
<div class="sample sample2"></div>
<div class="sample sample3"></div>

linear-gradient()と同じような引数が設定でき、色の後に指定した位置の値を使って反復して要素全体を埋めます。

.sample1 {
	background-image: repeating-linear-gradient(red, blue 33.3%);
}
.sample2 {
	background-image: repeating-linear-gradient(to left top, red, blue 20px);
}
.sample3 {
	background-image: repeating-linear-gradient(to left top, black 0px, black 15px, white 15px, white 30px);
}

反復線形グラデーションのデモページ

放射グラデーションの反復はrepeating-radial-gradient()を使用します。

<div class="sample sample1"></div>
<div class="sample sample2"></div>
<div class="sample sample3"></div>

反復線形グラデーションと同じように、pxや%を使った値で指定できます。

.sample1 {
	background-image: repeating-radial-gradient(red, blue 33.3%);
}
.sample2 {
	background-image: repeating-radial-gradient(circle at 0% 100%, red, blue 20px);
}
.sample3 {
	background-image: repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);
}

反復放射グラデーションのデモページ

扇形グラデーションの反復はrepeating-conic-gradient()を使用します。

<div class="sample sample1"></div>
<div class="sample sample2"></div>
<div class="sample sample3"></div>

反復扇形グラデーションの場合はpxを使った指定はできませんが、%やdegを使った指定ができます。

.sample1 {
	background-image: repeating-conic-gradient(red, blue 33.3%);
}
.sample2 {
	background-image: repeating-conic-gradient(from 45deg at 25% 25%, red, blue 20%);
}
.sample3 {
	background-image: repeating-conic-gradient(black 0deg 10deg, white 10deg 20deg);
}

反復扇形グラデーションのデモページ

参考サイト

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

CSSのグラデーションを使用する

線形グラデーション

放射グラデーション

扇形グラデーション

反復グラデーション

コメントを残すコメントをキャンセル

Category

Tag

Recent

CSSのグラデーションを使用する

線形グラデーション

放射グラデーション

扇形グラデーション

反復グラデーション

関連記事

Yu Gothic UIで「」が重なって表示される

CSSの:not()で複数の条件を指定する

CSSでslideDownを実装する

タブの実装でアクセシビリティを意識する

Pug使用時にHTMLのソースコード上で改行する

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル