【CSS】グラデーション（linear-gradient）の使い方まとめ

linear-gradientで作るグラデーションの実装方法をまとめました。

{
  background: linear-gradient(to bottom, #78b0a0, #efdab9);
}

See the Pen gradient by ushi_osushi (@ushi_osushi) on CodePen.

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

to ○○と方向を指定することでグラデーションをかける向きを変えることができます。

{
  background: linear-gradient(to top, #22c1c3, #fdbb2d);
  background: linear-gradient(to right, #22c1c3, #fdbb2d);
  background: linear-gradient(to bottom, #22c1c3, #fdbb2d);
  background: linear-gradient(to left, #22c1c3, #fdbb2d);
}

See the Pen gradient_ direction by ushi_osushi (@ushi_osushi) on CodePen.

斜めにグラデーションをかける

to ○○ ○○と方向を半角スペースで区切って二つ指定することで斜めにグラデーションをかけることができます。

{
  background: linear-gradient(to bottom right, #108dc7, #ef8e38);
}

See the Pen gradient_ diagonal by ushi_osushi (@ushi_osushi) on CodePen.

角度を指定してグラデーションをかける

方向指定を○○degとすることで、細かく角度を指定してグラデーションをかけることができます。

{
  background: linear-gradient(110deg, #dd3e54, #6be585);
}

See the Pen gradient_angle by ushi_osushi (@ushi_osushi) on CodePen.

グラデーションの位置を変える

色指定の後に半角スペースで区切ってパーセンテージを記述することで、グラデーションが始まる位置を指定することができます。
下記では縦に50%の位置を超えてからグラデーションが始まるようにしています。

{
  background: linear-gradient(to bottom, #fc5c7d 50%, #6a82fb);
}

See the Pen gradient_position by ushi_osushi (@ushi_osushi) on CodePen.

3色以上のグラデーション

,(カンマ)で区切って色の記述を追加することで3色以上のグラデーションが実装できます。

3色

{
  background: linear-gradient(to bottom, #aa4b6b, #6b6b83, #3b8d99);
}

See the Pen gradient_3colors by ushi_osushi (@ushi_osushi) on CodePen.

4色

{
  background: linear-gradient(to bottom, #99f2c8, #12c2e9, #c471ed, #f64f59);
}

See the Pen gradient_4colors by ushi_osushi (@ushi_osushi) on CodePen.

画像にグラデーションをかける

linear-gradient()の後に,(カンマ)で区切ってurl()を書くことで画像に対してグラデーションをかけることができます。

{
  background: linear-gradient(to bottom right, #fc5c7db3, #6a82fbb3), url(https://cdn.pixabay.com/photo/2015/10/13/15/16/lemons-986304_1280.jpg);
}

See the Pen gradient_image by ushi_osushi (@ushi_osushi) on CodePen.

こんなこともできます

hoverでグラデーションをフワッと変えたい(transition)

transitionを書いただけでは動かない

hoverでアニメーションを付けて色を変えたい時はtransitionを使用することが多いと思います。
しかし、linear-gradientは下記のようなtransitionを使った実装はできません。
transitionはbackground-imageをサポートしていないからです。

この実装だとグラデーションは変わるがtransitionが動作しない

{
  background: linear-gradient(to bottom, #d53369, #cbad6d);
  transition: 0.3s;
  
  &:hover {
    background: linear-gradient(to bottom, #cbad6d, #d53369);
  }
}

See the Pen Untitled by ushi_osushi (@ushi_osushi) on CodePen.

background-colorではなくbackgroun-imageであることに注意
linear-gradientで使用するbackgroundプロパティを略さずに書くとbackgroun-imageとなります。
略されているのはcolorだと勘違いして実装を進めていると、今回のようなケースでハマってしまうかもしれません。

{
  background-image: linear-gradient(to bottom, #78b0a0, #efdab9);
}

疑似要素とopacityを使用する

ではどうすればいいのかというと、疑似要素とopacityを使用してbackground-image & transitionで本来動いて欲しかったのと同じアニメーションを実装します。

疑似要素にはhover時に表示したい色を設定しておき、opacityでhover時のみ表示されるようにします。
そして元の要素に重ねて、transitionはopacityに適用されるようにします。
そうすることで、hoverして疑似要素が表示されるときにグラデーションがフワッと切り替わっているように見えます。

{
  position: relative;
  z-index: 0; // hover時にテキストなどが隠れないよう前面に設定する
  background: linear-gradient(to bottom, #d53369, #cbad6d); // 通常時のグラデーション

  // hover時に表示させる疑似要素
  &::after {
    position: absolute;
    z-index: -1; // hover時にテキストなどが隠れないよう背面に設定する
    background: linear-gradient(to bottom, #cbad6d, #d53369); // hover時のグラデーション
    opacity: 0; // 通常時は非表示(透明)にしておく
    transition: opacity 0.5s;
  }

  &:hover {
    &::after {
      opacity: 1; // hoverで疑似要素を表示する
    }
  }
}

See the Pen Untitled by ushi_osushi (@ushi_osushi) on CodePen.

borderでも使いたい

borderプロパティではlinear-gradientはサポートされていないので使用することができません。

この書き方はできない

{
  border: linear-gradient(to bottom, #d53369, #cbad6d);
}

borderのグラデーションを実装するには、これまで通りbackgroundでグラデーションを表示させつつ、それをborderっぽく見せる工夫が必要になります。
一例ですがここではグラデーションをかけた背景に、表示させたいborderのサイズ分だけ小さくした疑似要素を前面に重ねて、グラデーションがかかったborderが表示されているように見せたいと思います。

@mixin border($width, $height, $border_size) {
  width: ($width - $border_size * 2) + px;
  height: ($height - $border_size * 2) + px;
}

{
  position: relative;
  z-index: 0; // テキストなどが隠れないよう前面に設定する
  width: 150px;
  height: 150px;
  background: linear-gradient(to bottom, #5fc3e4, #e55d87);

  &::after {
    // 150x150のボックスに対して4pxのborder幅を引いたwidth,heightを設定する
    @include border(150, 150, 4);

    position: absolute;
    z-index: -1; // 要素のテキストなどが隠れないように背面に設定する
    background-color: #fff;
  }
}

See the Pen gradient_border by ushi_osushi (@ushi_osushi) on CodePen.

円形のグラデーションを実装したい

radial-gradient()を使用することで実装ができます。
こちらもlinear-gradient同様色々な調整ができますが、この記事での説明は割愛します。

{
  background: radial-gradient(#a5cc82, #00467f);
}

See the Pen gradient_radial by ushi_osushi (@ushi_osushi) on CodePen.

模様を書くことも可能

ここまで紹介したテクニックを駆使するとグラデーションで模様を表現することも可能です。
私の腕前では実装できないので下記のサイトからのコピーですが、1つだけ紹介したいと思います。
サイトの名前通り、まさにマジックですね。

See the Pen Untitled by ushi_osushi (@ushi_osushi) on CodePen.