【背景グラデ】linear-gradientの使い方

背景にグラデーションをかけたいけどやり方がわからない。

そんな時にはlinear-gradientを使うといいのでそれについて解説します。

まずは完成品

linear-gradient関数を使うとこのような背景が簡単に作成できます。

See the Pen linear-gradient01 by yukiwebcreate (@Yukiwebcreate) on CodePen.

単色で塗りつぶした背景よりも圧倒的に見映えはよく、

色の指定の仕方次第で色鮮やかにも、哀愁を漂わせることも可能になります。

そんなlinear-gradientが使いこなせるようなりたいですよね。

大丈夫、3分くらいでなれます。

linear-gradientとは？

調べてみるとこのような説明文が出てきました。

CSS の linear-gradient() 関数は、二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。結果は <gradient> データ型のオブジェクトであり、これは <image> の特殊型です。

linear-gradient() – CSS: カスケーディングスタイルシート | MDN

ちょっとわかりにくいので、linear-gradient関数を簡単に説明すると、

2色以上を使う背景描画を行うCSSの関数です。

もっと極端に簡単に言えば、グラデ背景を作るやつです。

linear-gradientの使い方

基本的にはbackgroundプロパティの値にlinear-gradient関数を入れて書きます。

例：

background: linear-gradient(45deg, blue, red);

linear-gradientにはグラデーションをカスタマイズするためにいくつもの構文があります。

今回はそんな中でも覚えておくと便利なものを選りすぐってサンプルとともにご紹介します。

もちろんコピペ利用OKなので、是非役立ててください！

背景グラデのサンプル1

See the Pen linear-gradient02 by yukiwebcreate (@Yukiwebcreate) on CodePen.

45°の傾き(45deg)をつけた青から赤のグラデーションです。

CSSでの指定はこのようになります。

background: linear-gradient(45deg, blue, red);

背景グラデのサンプル2

See the Pen linear-gradient03 by yukiwebcreate (@Yukiwebcreate) on CodePen.

こちらは左から右( to right )に向かって、青から始まり長さ50%のところで

黄色(色経由点)を通って、赤で終わるパターンのものです。

CSSはこのようになってます。

    background: linear-gradient(to right, blue, yellow 50%, red);

前後の色を暗めにし、真ん中（色経由点）を明るめにして光が差す感じを演出したり、

水平線っぽく表現したりと、複数の色を組み合わせることで多様なデザインができますね。

背景グラデのサンプル3

See the Pen linear-gradient04 by yukiwebcreate (@Yukiwebcreate) on CodePen.

こちらは左から右へ、紫から黒へと変化するグラデーションです。

ここで新しいのは.25turnという文字。

  background: linear-gradient(0.25turn, purple, 50%, black);

これは試しに0turnにしてみるとわかりますが、degと同じで角度を表す書き方です。

0turnにすると下から上に紫から黒となり、.25turnにすると左から右へ紫から黒と変化します。

つまり最大値は1turnで最低値は0turn。最大値を1としてどれくらい回すかというだけの話です。

180度が1として「1の4分の１の.25だけturnするよ」って言ってるってことですね。

linear-gradientのturnについての説明は探してもあまりなかったので、

この説明で理解していただけたら非常にありがたいです。

まとめ

linear-gradientはなんとなく書くこと多くて面倒臭そうですが、

わざわざ画像作るよりCSSでぱぱっとやってしまった方がラクという場合もあります。

是非この機会に覚えてしまってさっと使えるようになっておきましょう。

ちなみにgradient系は一種類ではなく、repeatやconicなどもあります。

それらについてはまた記事を書こうと思ってます。