CSSツートンカラーテキスト生成
2色の境界がくっきりとしたツートンカラーのテキストCSSを生成します。
プレビュー
<span class="two-tone-text">{{text}}</span>.two-tone-text {
font-size: {{font_size}}px;
font-weight: bold;
color: transparent;
background: repeating-linear-gradient({{angle}}deg,
{{col1}} 0% {{split}}%,
{{col2}} {{split}}% 100%
);
-webkit-background-clip: text;
background-clip: text;
}機能・使い方
- 2色の境界がくっきりとしたツートンカラーテキストを作成するツールです。
- 角度や分割位置を自由に調整できます。
repeating-linear-gradientとbackground-clip: textを利用しています。
利用しているプロパティの説明
repeating-linear-gradient
通常は繰り返しのグラデーションを作成する関数ですが、ここでは「0%から50%まで」と「50%から100%まで」のように同じ位置で色を切り替えることで、色が混ざらずにくっきりと分かれたツートンカラー（ハードストップ）を表現しています。
background-clip: text
背景（ここではツートンカラーのグラデーション）をテキストの形に合わせて切り抜くプロパティです。あわせて文字色（color）を
transparent（透明）に指定することで、文字の形の背景色を表示させています。
