linear-gradient(リニア・グラディエント)とは、CSSで背景(back-ground)に「線形グラデーション」を作成するためのCSS記述です。
基本的な記述は下記のようになっています。
background: linear-gradient(角度, 開始の色, 終了の色);
角度はdegで指定します。
角度は下図を参考にしてください。

そして開始と終了の色は、#から始まるカラーコードやrgbaで指定します。
また、2色グラデーションだけでなく、中間色を入れた3色などもできます。
色が変化していく方向や割合でグラデーションを記述する方法もありますが、この記事では詳細は割愛します。
記述例だけ紹介します。
background: linear-gradient(right, red 20%, green 60%, blue 90%);
基本的には、最初に方向を指定してから、グラデーションの色を決めていくdeg指定と同じです汗
左から右へグラデーション(静止背景)
ピンク(#ff9ece)からスタートし、中間色のパープル(#ce9eff)を経て、ブルー(#9eceff)へと背景がグラデーションしています。
▼html/CSS
<div class="box01"></div>
.box01{
height: 200px;
width:60%;
background: linear-gradient(45deg, #ff9ece 0%, #ce9eff 50%, #9eceff 100%)
}
背景のグラデーションをアニメーションで動かす
一個上の背景グラデーションを、アニメーションを使って動かします。
infiniteでアニメーションを無限にループさせ、alternateで左右交互に動かします。
▼HTML/CSS
<div class="box02"></div>
.box02{
height: 200px;
width:60%;
background: linear-gradient(45deg, #ff9ece 0%, #ce9eff 50%, #9eceff 100%) 0 0 / 300% 100% repeat;
animation: grade_anim 5s infinite alternate;
}
@keyframes grade_anim {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
グラデーションを繰り返し、ストライプ柄を作る
repeating-linear-gradientを使うことで、グラデーションを繰り返すことができます。
それを使い、ストライプ柄が作れます。
<div class="box05"></div>
.box05 {
height: 300px;
width:80%;
background: repeating-linear-gradient(90deg, #ff9ece, #ff9ece 10px, #9eceff 5px, #9eceff 20px);
}
グラデーションの角度を指定する『90deg』を『0deg』にすれば、ボーダーになりますし、45度の『45deg』にすれば斜めストライプになります。
グラデーションを繰り返し、市松模様を作ってみる
background-blend-modeが背景を混ぜ合わせたりする(景色の写真の上に、セピアの色を重ねたりなど)ときに使うプロパティです。
そのプロパティをdifferenceにすると相違表示できます。
▼HTML/CSS
<div class="box03"></div>
.box03{
height: 200px;
width:60%;
background-image:
repeating-linear-gradient(90deg, black 0 30px, white 30px 60px),
repeating-linear-gradient(180deg, white 0 30px, black 30px 60px);
background-blend-mode:difference;
}
background-blend-modeは他にも様々なプロパティがあり、オーバレイをかけたり、暗め合成、明るめ合成など選べます。
画像の上にグラデをかけてみる。
上のbackground-blend-modeとは少し違う感じで下部にグラデーションをかけて、画像の上に乗っているテキストを読みやすくします。
(背景のbackgroundに画像を入れるのではなく、普通にimgタグで画像いれてもいいですよ)
▼HTML/CSS
<div class="box04"><span>カピパラさん</span></div>
.box04{
height: 300px;
width:80%;
background-image: url(https://webkatsudou.com/wp-content/uploads/2023/04/kapi.jpg);
background-position: 50% 50%;
background-size: cover;
position: relative;
}
.box04 span{
color:#ffffff;
position: absolute;
top:90%;
left:2%;
z-index: 999;
}
.box04::after{
content: "";
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, #2a2a2a 0%, #ce9eff00 30%, #9eceff00 100%);
}