【CSS】background: linear-gradientで背景をグラディエーションさせる方法
background: linear-gradientとは
二つ以上の平行する色が徐々に変化します。
書き方
background: linear-gradient(方向, 色, 色);と指定します。
色はカンマ「,」で増やすことができます。
方向の指定
to + top, right, bottom, left
初期値はto bottomです。方向を何も書かない時と同じです。
to rightで左から右へ
to leftで右から左へ
to topで下から上へ
数値deg
30deg
60deg
90deg = to right
応用編
linear-gradientを複数使う
.box{
background: 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%);
}
CSSのanimationを使う
.box11{
background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, rgb(0,255,0) 14.28%,
rgb(0,255,255) 21.4%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
background-size: 600vw 600vw;
animation: slide 10s linear infinite forwards;
}
@keyframes slide{
0%{
background-position-x: 0%;
}
100%{
background-position-x: 600vw;
}
}
写真にかぶせる
.box12{
background: linear-gradient
(to top,
rgba(0, 0, 255, 0.198),
rgba(255, 0, 0, 0.274)),
url(../../images/blog/202006/11\ \(10\).jpg);
background-size: cover;
background-position: center center;
}

便利なジェネレーターを使う
簡単にグラディエーションを作るサイトがありますので活用しましょう。まとめ
backgroundのlinear-gradientについて解説しました。 設定を変えて、オシャレな背景をいろいろ作ってみましょう。

background: linear-gradient(方向, 色, 色);
方向: ➀ to + top, right, bottom, left
➁ 数値 + deg
linear-gradientを複数使ったり、アニメーションを使ったり、写真に重ねたりすることができる。