ストライプ柄テキストCSSジェネレーター
テキストをストライプ（縞模様）柄にするCSSを作成します。色や角度、幅を自由にカスタマイズ可能です。
プレビュー
<span class="stripe-text">{{text}}</span>.stripe-text {
font-size: {{font_size}}px;
font-weight: bold;
color: transparent;
background: repeating-linear-gradient(
{{angle}}deg,
{{col1}} 0 {{width}}em,
{{col2}} {{width}}em {{width_x2}}em
);
-webkit-background-clip: text;
background-clip: text;
}機能・使い方
- テキストをストライプ（縞模様）柄にするCSS生成ツールです。
repeating-linear-gradientとbackground-clip: textを組み合わせて実現しています。- プリセットカラーボタンを使うと、色の組み合わせを簡単に切り替えられます。
ポイント
ストライプの幅は em 単位で指定しているため、フォントサイズを変更しても比率が保たれます。
repeating-linear-gradient の数値は「色1の開始〜終了位置,
色2の開始〜終了位置」となるため、色2の終了位置（width_x2）は色1の幅の2倍になるように自動計算しています。
