【CSS】金色の文字のサンプル【グラデーション】

CSSで金色の文字 コーディング
スポンサーリンク

金色のゴールドっぽい質感はCSSのグラデーションで簡単に作ることができます。
キラキラなゴージャス感のある見出しなどにぴったりです。

違ったパターンのサンプルを3つ用意してみました。

金色の文字のサンプル

 

See the Pen
wvowjgV
by nzm (@nzm)
on CodePen.

See the Pen
OJbLZQK
by nzm (@nzm)
on CodePen.

See the Pen
dyObemg
by nzm (@nzm)
on CodePen.

微妙な違いやけど光の入り方や角度が違うねん

解説

  1. background-imageで金色のグラデーション背景を作る
  2. -webkit-background-clip: textで文字の形に合わせて背景を切り抜く
  3. color: transparentでテキスト部分を透明にして、テキスト部分の背景を浮かび上がらせる

これだけです。簡単ですね。

コメント

タイトルとURLをコピーしました