[CSS] 枠線と文字をグラデーションに

とあるサイトで、ボタンのデザインに「枠線も文字もグラデーション」を指定されたのですが、初めての経験だったので手間取ってしまったため、忘れないようにメモメモ。

実現できるものの、ちょっと面倒でした。

まずは出来上がりから

ということで、枠線と文字をグラデーションにした完成イメージはこちら。

サンプルHTML

HTMLのサンプルソースです。

<p class="gradation-frame">
  <span class="gradation-word">GRADATION</span>
</p>

pタグは枠を、spanタグは文字を出力します。

サンプルCSS

CSSのサンプルソースです。

.gradation-frame {
    background-color: #fff;
    border-radius: 15px;
    line-height: 30px;
    position: relative;
    text-align: center;
    width: 200px;
}
.gradation-frame:after {
    background: linear-gradient(to right, #afa 0%, #faa 100%);
    border-radius: 15px;
    content: "";
    position: absolute;
    bottom: -2px;
    left: -2px;
    right: -2px;
    top: -2px;
    z-index: -1;
}
.gradation-word {
    background: linear-gradient(to right, #afa 0%, #faa 100%);
    color: #faa;
    font-weight: bold;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

枠線について

gradation-frameというクラスは、after疑似要素で背景にグラデーションを描き、その上に背景白の要素を重ねて、ボーダーのような枠線を作っています。

疑似要素のbackgroundの値を変更することで、グラデーションの色や、グラデーションの方向などを変更できます。

疑似要素のbottom、left、right、topの値を変更することで、枠線の太さを変更できます。

要素のline-heightの値を変更することで、高さを変更できます。この高さの半分の値をborder-radiusで指定すれば、両端が丸い枠になります。逆にborder-radiusを削除することで、四角い枠になります。

要素のwidthの値を変更することで、幅を変更できます。枠の中に入れる文字の長さによって、適宜変更してください。

文字について

gradation-wordというクラスは、文字のグラデーションを作っています。

まず、backgroundで背景にグラデーションを作成し、background-clipで背景の適用範囲をテキストに指定し、text-fill-colorで文字の色を透明にすることで背景のグラデーションを透かしています。

また、text-fill-colorに対応していないブラウザ（今はIEくらいしか無いかも？）では文字にグラデーションをかけることができないので、colorで通常の文字色も指定しています。

さいごに

ということで、枠と文字にグラデーションをかける方法をまとめてメモメモしました。

どちらも、とりあえず2020年9月時点で最新のChromeとFirefox、Microsoft Edge、Opera、Safari（iPad）では正常に表示されることを確認していますが、その他のブラウザや古いブラウザでは、グラデーションにならないものもあるかもしれません。

念のため、グラデーション表示できない場合も考慮してCSSを組んでおくといいかもしれませんね。