【基本スキル編】「linear-gradient」を使ってグラデーションを作る方法について解説！

2024年8月28日2024年12月8日

グラデーションを作りたいけどどうやって作るんだろう？

背景やボタンなどでも使うことが多いグラデーション。

単色だけでなくグラデーションを使えるようになることでデザインに変化を加えることができます。

今回の記事では linear-gradient を使ったグラデーションの作り方について解説をしていきます。

今回の記事でできるようになること

linear-gradient を使ってグラデーションを作れるようになる

決して難しいテクニックではないのでこの機会にぜひ作れるようになっておきましょう！

linear-gradient を理解しよう！

下のコードを見ていきましょう！

まずはシンプルな横長のブロックを作ってみます。

-- html --

<div class="box"></div>

-- css --

.box {
  width: 500px;
  height: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

それではこのブロックにグラデーションを入れてみましょう。

-- css --

.box {
  width: 500px;
  height: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to right, red 30%, blue 80%);
}

右のような感じになります。

このコードの意味としては

「右に向かって」
「30%まで赤」
「30%から80%までの間に赤から青に色が変わる（ここがグラデーションとなる！）」
「80%以降は青」

という意味になります。

構文は以下のようになります。

background: linear-gradient(方向, 色1, 色2, 色3, ...);

方向に関して先ほどは「to right」と記述しましたが

-- css --

.box {
  width: 500px;
  height: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, red 30%, blue 80%);
}

このように書いても同様です。「deg」は角度を示します。

ではここで問題です！
以下のコードではどのようなグラデーションになるでしょうか？

想像で良いのでぜひ考えてみてください。

-- css --

.box {
  width: 500px;
  height: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(45deg, red, blue 30%, green 70%, yellow 90%);
}

正解はこんな感じ！