七色の虹ストライプテキスト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 calc({{width}}em * 2),
{{col3}} calc({{width}}em * 2) calc({{width}}em * 3),
{{col4}} calc({{width}}em * 3) calc({{width}}em * 4),
{{col5}} calc({{width}}em * 4) calc({{width}}em * 5),
{{col6}} calc({{width}}em * 5) calc({{width}}em * 6),
{{col7}} calc({{width}}em * 6) calc({{width}}em * 7)
);
-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（透明）に指定することで、文字の形の背景色を表示させています。
