七色の虹ストライプテキストCSSジェネレーター
七色のストライプで構成された虹色テキスト用CSSを作成します。ビビッドやパステルなど多彩なプリセットを用意。
プレビュー
<span class="rainbow-text">{{text}}</span>.rainbow-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,
{{col3}} {{width_x2}}em {{width_x3}}em,
{{col4}} {{width_x3}}em {{width_x4}}em,
{{col5}} {{width_x4}}em {{width_x5}}em,
{{col6}} {{width_x5}}em {{width_x6}}em,
{{col7}} {{width_x6}}em {{width_x7}}em
);
-webkit-background-clip: text;
background-clip: text;
}機能・使い方
- 7色のストライプで作る虹色テキストCSS生成ツールです。
repeating-linear-gradientとbackground-clip: textを組み合わせて実現しています。- 10種類のプリセットから好きな配色を選べます。
ポイント
ストライプの幅は em 単位で指定しているため、フォントサイズを変更しても比率が保たれます。
7色が隙間なく連続するようにCSSが自動生成されます。
利用しているプロパティの説明
repeating-linear-gradient
指定した色のパターンを繰り返すグラデーション関数です。色ごとの幅を厳密に指定することで、グラデーションではなく、色がくっきりと分かれたストライプ（縞模様）を作成しています。
background-clip: text
背景（ここではストライプ模様）をテキストの形に合わせて切り抜くプロパティです。あわせて文字色（color）を
transparent（透明）に指定することで、文字の形の背景色を表示させています。
