どうも7noteです。単色では再現が難しいゴールド。
単色でゴールドをやろうとしても・・・
![e2d06e.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F49763a69-aae1-1f31-918e-dd7894bebe7a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d2697a8d195c5e701d75e3f4cb6e112a)
単色でゴールドは結構難しいです。というか無理。
グラデーションでゴールドにする
div {
background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}
![gold.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F588b30bd-803d-6ef3-57a7-66ef1f19d88e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=06c2d6e9423b348d37393d3dbc3f5cbf)
シルバーなら・・・
div {
background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}
![silver.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fdd6752a7-ee9e-ccf3-09df-49fdcfeaeda9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b68c2fe99d241e4860e3e2200a46d291)
まとめ
ホームページの製作依頼を受けるときに、たまにゴールドを使いたいという要望が出たりするので、作り方は覚えておくといいかも。
おそまつ!
参考
https://1-notes.com/css-text-metal-design/
https://encycolorpedia.jp/ffd700