【CSS】グラデーションを背景、ボーダー、文字にかけたい！

こんにちは！コーダーのメロンパンです。

Webデザインでそこそこよく用いられる「グラデーション」。
しかし、CSSで実装しようとしてもうまくできなくて、結局画像で書き出しているという方もいらっしゃるかもしれません。

グラデーションは、色を取り扱ってはいますが、一般的なCSSの色指定とは記述の仕方が異なります。
今回は、グラデーションをCSSでいろいろな箇所で適用する書き方についてお伝えします！

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

まずは背景への指定です。

See the Pen goldenBox by 菊本恭子 (@fgtqkvzr-the-reactor) on CodePen.

ポイントはbackground-imageを使うことです。

ついついbackground-colorを使いたくなってしまいますが、グラデーションはbackground-colorでは指定できません。
もちろん、一括指定ができるbackgroundも使えます！

ボーダーをグラデーションにする

次はボーダーをグラデーションにしてみます。

https://codepen.io/fgtqkvzr-the-reactor/embed/QWPRXxR?default-tab=css%2Cresult&editable=true

See the Pen goldenBorder by 菊本恭子 (@fgtqkvzr-the-reactor) on CodePen.

こちらもborder-colorではなくborder-imageに値を指定していきます。

ポイントは末尾の1で、こちらを入力しないと四隅にしかグラデーションが適用されません。
下記のように書き換えることもできます。

border: 5px solid;
border-image: linear-gradient(60deg, rgba(255, 242, 58, 1), rgba(224, 162, 8, 1) 80%);
border-image-slice: 1;

backgroundとは異なり、borderはborder-imageの一括指定プロパティではないため、

border: 5px solid  linear-gradient(60deg, rgba(255, 242, 58, 1), rgba(224, 162, 8, 1) 80%) 1;

のような書き方はできないため要注意です。

文字をグラデーションにする

最後に文字をグラデーションにします。

See the Pen goldTxt by 菊本恭子 (@fgtqkvzr-the-reactor) on CodePen.

ボーダー以上にややこしくなってきました。
解説していくと、

color: transparent;

テキストの色を透明にして

background:linear-gradient(90deg, rgba(255, 242, 58, 1), rgba(224, 162, 8, 1) 20%);

文字の背景にグラデーションを指定した上で

-webkit-background-clip: text;

背景の表示範囲をテキストに設定

という流れになります。
ここでbackgroundに画像を指定してあげると画像を文字で切り抜くことができます。
グラデーションは色を使ってはいますが画像と同じ扱いなんですね。
これを頭に入れておくと少し理解が深まるかもしれません。

ちなみに、下のコードでも同じ結果になります。

.goldenTxt {
  font-size: 60px;
  font-weight: 900;
  background:linear-gradient(90deg, rgba(255, 242, 58, 1), rgba(224, 162, 8, 1) 20%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

ベンダープレフィックス（-webkit-）は、どちらのコードでも付けていないとうまく表示されないので、忘れずに付けましょう！

グラデーションをCSSで再現して素敵なサイトづくりを！

今回はグラデーションをCSSでいろいろな箇所に実装する方法についてお伝えしました。

画像を切り出して再現することもできますが、CSSであればレスポンシブデザインにも対応できますし、画像を使うよりも軽くて済みます。
SEO的にも文字を画像にするのは好ましくないので、できるだけCSSで再現できるといいですね。

グラデーションは想像以上に様々な表現ができるので、深めてみるのも面白いですね！

素敵なサイトづくりの参考になりましたら幸いです。