七色の虹色グラデーションテキストCSSジェネレーター
滑らかに変化する虹色グラデーションテキストCSSを作成します。ビビッドやパステルなど多彩なプリセットを用意。
プレビュー
<span class="rainbow-text">{{text}}</span>.rainbow-text {
font-size: {{font_size}}px;
font-weight: bold;
color: transparent;
background: linear-gradient({{angle}}deg,
{{col1}},
{{col2}},
{{col3}},
{{col4}},
{{col5}},
{{col6}},
{{col7}}
);
-webkit-background-clip: text;
background-clip: text;
}機能・使い方
- 7色のグラデーションで作る虹色テキストCSS生成ツールです。
linear-gradientとbackground-clip: textを組み合わせて実現しています。- 10種類のプリセットから好きな配色を選べます。
ポイント
滑らかなグラデーションで、文字に立体感や鮮やかさをプラスできます。
利用しているプロパティの説明
linear-gradient
複数の色を滑らかに変化させるグラデーション関数です。ここでは7色を均等に配置して、美しい虹色のグラデーション背景を作成しています。
background-clip: text
背景（ここでは虹色のグラデーション）をテキストの形に合わせて切り抜くプロパティです。あわせて文字色（color）を
transparent（透明）に指定することで、文字の形の背景色を表示させています。
