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

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

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

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

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

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

シルバーなら・・・

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

まとめ

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

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