LoginSignup
18
8

More than 1 year has passed since last update.

CSSで色を限りなくゴールドやシルバーに近づける

Last updated at Posted at 2020-12-08

どうも7noteです。単色では再現が難しいゴールド。

単色でゴールドをやろうとしても・・・

e2d06e.png

単色でゴールドは結構難しいです。というか無理。

グラデーションでゴールドにする

div {
  background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}

gold.png

シルバーなら・・・

div {
  background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}

silver.png

まとめ

ホームページの製作依頼を受けるときに、たまにゴールドを使いたいという要望が出たりするので、作り方は覚えておくといいかも。

参考
https://1-notes.com/css-text-metal-design/
https://encycolorpedia.jp/ffd700

18
8
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
8