spanなしで文字ごとに色を変えるCSS作成ツール
spanタグを使わずに、CSSのグラデーション機能で文字ごとに色を変えるスタイルを作成します。
プレビュー
全角フォントなら1em、半角フォントの場合は0.6が丁度良いと思います。
※ 英数字は等幅フォント(monospaceなど)推奨です。
1
2
3
4
5
6
<span class="multi-color-text">{{text}}</span>.multi-color-text {
font-family: "Courier New", monospace; /* 等幅推奨 */
font-size: {{size}}px;
font-weight: bold;
letter-spacing: normal;
color: transparent;
background: repeating-linear-gradient(
90deg,
{{color1}} 0 {{width}}em,
{{color2}} {{width}}em calc({{width}}em * 2),
{{color3}} calc({{width}}em * 2) calc({{width}}em * 3),
{{color4}} calc({{width}}em * 3) calc({{width}}em * 4),
{{color5}} calc({{width}}em * 4) calc({{width}}em * 5),
{{color6}} calc({{width}}em * 5) calc({{width}}em * 6)
);
background-clip: text;
-webkit-background-clip: text;
}機能・使い方
spanタグで1文字ずつ囲むことなく、CSSのグラデーション機能を使って文字ごとに色を変えるスタイルを作成します。- 6色の繰り返しパターンを設定できます。
- 注意: 文字幅(1em)ごとに色を切り替える仕組みのため、プロポーショナルフォント（文字ごとに幅が違うフォント）では色がズレる場合があります。等幅フォントでの使用や、タイトルロゴなどの固定文字に調整して使用することをお勧めします。
CSSプロパティの説明
backgroundプロパティのrepeating-linear-gradient関数を使用して、複数の色を繰り返す背景グラデーションを作成しています。
さらにcolor: transparentと-webkit-background-clip: textを組み合わせることで、背景のグラデーションを文字の形に切り抜いて表示しています。
