サイト制作のとき、ボタンなどの色をグラデーションにしたい場合、ありませんか?

今回は、背景色をグラデーションにする方法を紹介します。

基本のコードは、以下になります。

<div class="container"></div>
.container {
  width: 400px;
  height: 300px;
  border: 1px solid #000;
}

image2

背景色をグラデーションする

背景色をグラデーションにするには、linear-gradientを使います。

例えば、赤色から白色のグラデーションにしてみます。

.container {
  width: 400px;
  height: 300px;
  border: 1px solid #000;
  background: linear-gradient(red, white);
}

ブラウザで確認すると、

image4

上から下へグラデーションになりました。

グラデーションの方向を変える

グラデーションの方向も変えられます。

例えば、左から右へグラデーションにするには、linear-gradientの色指定の前にto rightを指定します。

.container {
  width: 400px;
  height: 300px;
  border: 1px solid #000;
  background: linear-gradient(to right, red, white);
}

to は『〜へ向かう』という意味なので、『(左から)右へ向かう』という指示になります。

ブラウザで確認すると、

image5

斜め方向にグラデーションする

左から右へグラデーションになりました。

ちなみに、右から左へグラデーションはto left、下から上へグラデーションはto topになります。

縦横だけではなく、斜め方向のグラデーションも可能です。

例えば左上から右下の場合、linear-gradientto bottom rightを指定します。

ブラウザで確認すると、

image6

左上から右下へのグラデーションになりました。

例えば、右上から左下の場合to bottom left、左下から右上の場合to right topを指定します。

3 色以上グラデーションする。

グラデーションは 2 色だけでなく、3 色以上も可能です。

グラデーションを 3 色以上にしたい場合、linear-gradientの色指定を増やします。

.container {
  width: 400px;
  height: 300px;
  border: 1px solid #000;
  background: linear-gradient(to right, red, yellow, blue

ブラウザで確認すると、

image7

4 色のグラデーションになりました。

グラデーションがかかるタイミングを調整する

通常は、はじめから均等にグラデーションがかかっているのですが、グラデーションがかかるタイミングを調整することができます。

例えば、全体の 8 割は赤色にして、残り 2 割りをグラデーションにしたい場合、linear-gradientredred 80%にします。

.container {
  width: 400px;
  height: 300px;
  border: 1px solid #000;
  background: linear-gradient(red 80%, white);
}

ブラウザで確認すると、

image8

下が少しだけグラデーションになりました。

内側から外側にかけてグラデーションする

内側から外側にかけてグラデーションする場合、radial-gradientを使用します。

.container {
  width: 400px;
  height: 300px;
  border: 1px solid #000;
  background: radial-gradient(white, red);
}

ブラウザで確認すると、

image9

内側から外側のグラデーションができました。

一つ注意していただきたいのは、radial-gradientで最初に指定する色を内側の色、次に指定する色を外側の色にしてください。

グラデーションができるようになると、サイト制作の幅が広がりますので、ぜひ試してみてください。

ブログ一覧