メタル調テキストCSS作成ツール
ゴールドやシルバーなど、金属の光沢感を持つテキストのカスタマイズ可能なCSSジェネレーターです。
プレビュー
3色の繰り返しで光沢を表現します。
<span class="metal-text">{{text}}</span>.metal-text {
font-size: {{fontSize}}px;
font-weight: bold;
color: transparent;
background: repeating-linear-gradient(
{{angle}}deg,
{{color1}} calc(0.4em * {{scale}}),
{{color2}} calc(0.8em * {{scale}}),
{{color3}} calc(1.2em * {{scale}}),
{{color2}} calc(1.6em * {{scale}}),
{{color1}} calc(2.0em * {{scale}})
);
-webkit-background-clip: text;
background-clip: text;
}機能・使い方
- 金属のような光沢感を持つテキストCSSを作成するツールです。
- ゴールド、シルバーなどのプリセットから選択するか、独自の色を設定してオリジナルのメタルカラーを作成できます。
background-clip: textを使用して、文字の形にグラデーションを切り抜いています。
CSSプロパティの説明
repeating-linear-gradient を使用することで、一定のパターンで色が繰り返されるグラデーションを作り、金属特有の反射光を表現しています。
em 単位を使用しているため、フォントサイズを変更しても光沢のバランスが崩れにくい設計になっています。
※背景色が白や黒など、文字色とコントラストがある環境でないと視認性が下がる場合があります。プレビューの背景色を変えて確認してください。
