HTML/CSS
css
html
グラデーション

【CSS】linear-gradient で色にグラデーションをつける方法

2021/03/24

( 更新日：2022/04/19 )

HTMLやCSSを学んでいて、「linear-gradient」というコードを見たことはありませんか。

linear-gradientは色にグラデーションをつけるCSSの関数です。

この関数を使いこなせると、オシャレなデザインを手軽に実装することができます。

さっそく使い方について見ていきましょう。

linear-gradientの使い方

基本的なコードの書き方

まず、linear-gradientを使うときの、基本的なコードの書き方を見ていきます。

以下のコードをみてください。

<div class="gradation"></div>

.gradation {
  width: 100px;
  height: 100px;
  background: linear-gradient(skyblue, violet);
}

これを出力すると以下のようになります。

グラデーションのある色が表示されているのがわかります。

コードの基本的な書き方は、

「linear-gradient(２つ以上の色);」

となります。

例えば、先ほどの例では、「skyblue」と「violet」を混ぜているのでコードは、「linear-gradient(skyblue, violet);」となっています。

3つ混ぜるときは、例えば「linear-gradient(skyblue, violet, whitesmoke);」のように書きます。

ちなみにこのコードでは色は以下のようになります。

3色混ざっているのがわかります。

以上がlinear-gradientの基本的なコードの書き方になります。

ここまでは色の名称で指定してきましたが、もちろんカラーコードやRGB値で指定することもできます。

次に、生成したグラデーションの向きを変える場合について解説していきます。

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

linear-gradientでは、グラデーションの向きを変えることができます。

※向きを指定しない場合は、上から下に向けてグラデーションがつきます。

向きを指定するコードは、例えば以下のようになります。

<div class="gradation"></div>

.gradation {
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, skyblue, violet);
}

出力すると下のようになります。

「to right(右へ)」と指定したので、グラデーションが右に向いているのが分かります。

また、「right(右)」に加えて「bottom(下)」も指定すると、色は以下のようになります。

グラデーションが「右下」にかけてついているのが分かります。このグラデーションのコードは下のように書きます。

<div class="gradation"></div>

.gradation {
  width: 100px;
  height: 100px;
  background: linear-gradient(to right bottom, skyblue, Violet);
}

ここまで、右、下などの上下左右の方向で指定しました。

別の方法としては、「角度」で指定することもできます。

例えば、コードは以下のように書きます。

<div class="gradation"></div>

.gradation {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, skyblue, Violet);
}

「deg」は、「degree(度)」の略です。

45degと書くと45度の向きにグラデーションがつきます。

先ほどのコードを出力すると以下のようになります。

45度(右上)に向かってグラデーションがついているのがわかります。

グラデーションの色の割合を決める

グラデーションをつくる色の割合も決めることができます。

ただし、色が変わる地点を決めることで、結果的に色の割合を変化させるということです。

※「%」指定を使いますが、直接的に色の割合を指定するのではなく、あくまで色が変化する地点を決めているということです。

実際のコードと、出力結果を見ていきましょう。

色の割合を決めるコードは、例えば以下のようになります。

<div class="gradation"></div>

.gradation {
  width: 100px;
  height: 100px;
  background: linear-gradient(skyblue 20%, Violet 50%);
}

このコードを出力すると以下のようになります。

「skyblue 20%, violet 50%」と指定したので、グラデーションの向きにそって20%のところまでがskyblue、50%のところからがvioletになっています。

次にグラデーションをどんな場面で使うか紹介していきます。

linear-gradientを実際に使う場面

グラデーションはヘッダーやボタン、文字を書くセクションの色をつけるときに使われます。

例えば、ヘッダーの色にグラデーションをつけた例がこちらです。

コードは以下のようになります。

<header><p>こんにちは！</p></header>

eader {
  width: 100%;
  height: 600px;
  background: linear-gradient(to right top, skyblue, MediumSpringGreen);
  position: relative;
}
header p {
  position: absolute;
  top: 190px;
  left: 120px;
  font-size: 50px;
  font-weight: bold;
  color: rgb(29, 28, 28);
}

次に、ボタンの色にグラデーションをつける場合についてみていきましょう。

例えば、このようになります。

<div class="btn">ボタン</div>

.btn {
  width: 150px;
  height: 50px;
  padding-top: 25px;
  text-align: center;
  background: linear-gradient(to right bottom, violet, MediumSpringGreen);
}

ボタンの色にグラデーションをつける際は、周りの色やデザインと調和するように色を付けましょう。

ボタンのつくり方やデザインの例に関しては、下記の記事も読んでみてください。

HTMLでのボタンの作成方法(よくあるデザインの特徴5選も紹介)

他には、文字を書くセクションに使うこともできます。

<div class="row">
  <div class="block block1">
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  </div>
  <div class="block block2">
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  </div>
  <div class="block block3">
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  </div>
</div>

.row {
  display: flex;
  justify-content: center;
}
.block {
  width: 300px;
  height: 330px;
  padding: 120px 50px 0 50px;
  background: linear-gradient(to left top, skyblue, whitesmoke);
  line-height: 28px;
  margin-right: 25px;
}
.block:last-child {
  margin-right: 0px;
}

セクションごとに色を統一したり、特に強調したいところがあるときは色を変えるなど、考えながらデザインをしましょう。

グラデーションをつけるだけで、簡単におしゃれさを表現することができます。

よって、linear-gradientはおすすめの関数であると言えます。

混ぜる色が思いつかないときは、色々なデザインを調べて参考にしてみてください。