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

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

どうも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