linear-gradient（背景グラデーション）をtransitionで滑らかに切替える方法【CSS】

マウスホバー時などに、ボタンの背景色をtransitionで滑らかに変更する実装はよく行うと思います。

しかし、background: linear-gradientでグラデーションにした背景の場合、同様のやり方ではtransitionプロパティが効かないため、実装にはひと工夫必要です。

この記事では、そんなbackground: linear-gradientでグラデーションにした背景色を、アニメーションで滑らかに切り替えるための実装方法を解説します。

「background: linear-gradient」にはtransitionが効かない

例えば、マウスホバー時にボタンの背景色を滑らかに切り替えたい場合、単色の背景であれば以下のように記述すると思います。

.button {
    background: #ccc;
    transition: background 0.5s;
}

.button:hover {
    background: #083794;
}

しかし、背景がlinear-gradientで指定したグラデーションの場合、同様のやり方で以下のように記述してもtransitionは適用されません。

.button {
    background: linear-gradient(to right, #555, #ccc);
    transition: background 0.5s;  /* ←これは効かない */
}

.button:hover {
    background: linear-gradient(to right, #083794, #63d1c2);
}

上記CSSを使用して作成したボタンです。
マウスホバーすると背景がパッと切り替わってしまい、transitionプロパティが効いていないことがわかります。

See the Pen Untitled by iwa (@iwa0109) on CodePen.

背景グラデーションをアニメーションで切り替えるには？

まず、完成形のコードが以下になります。
マウスホバーすると背景グラデーションが滑らかに切り替わります。

See the Pen Untitled by iwa (@iwa0109) on CodePen.

上記コードの仕組みは、以下のような考え方で作られています。

上記の考え方を適用しているのが、CSSの以下の記述部分になります。

.button {
    position: relative;
    z-index: 0;
    background: linear-gradient(to right, #555, #ccc);
}

/* マウスホバー時の背景色を重ねて表示（初期状態で透明） */
.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right, #083794, #63d1c2);
    opacity: 0;
    transition: opacity 0.5s;
}

/* マウスホバー時に透明化を解除 */
.button:hover::before {
    opacity: 1;
}

ボタンの擬似要素を活用することで、不必要にhtmlタグを増やさずに実装が可能です。

ちなみにinset: 0はtop, right, bottom, leftが全て0と同義、
.buttonのz-index: 0と、.button::beforeのz-index: -1は、マウスホバー時にボタンのテキストが背景色の裏に隠れないために必要な記述になります。

補足：inputタグ形式のボタンの場合

ここまで擬似要素を活用した実装方法を解説しましたが、タグによっては擬似要素を使えない場合があります。
例えば、<input>タグ形式のボタンの場合、<input>タグには擬似要素が適用されないため、上述した実装方法はそのまま使用できません。

<input>タグ形式のボタンの場合、完成形のコードは以下のようになります。

See the Pen Untitled by iwa (@iwa0109) on CodePen.

<input>タグなど、擬似要素を適用できないタグを使用する場合は、親要素のタグを用意する必要があります。

<div class="wrapper">
    <input type="submit" value="Button" class="input" />
</div>

<input>タグ自身には背景色を設定せず、親要素側に背景色を指定します。
あとは、親要素の擬似要素を活用した同様の方法で、背景グラデーションの滑らかな切り替えを実現できます。

.wrapper {
    position: relative;
    z-index: 0;
    background: linear-gradient(to right, #555, #ccc);
}

.wrapper::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(to right, #083794, #63d1c2);
    opacity: 0;
    transition: opacity 0.5s;
}

.wrapper:hover::before {
    opacity: 1;
}

まとめ

background: linear-gradientでグラデーションにした背景色を、アニメーションで滑らかに切り替えるための実装方法を解説しました。

今回の内容のまとめです。