透過グラデーションテキストのCSS作成ツール
テキストに透明になるグラデーションを作成できるCSSジェネレーターです。方向や間隔も調整可能。
プレビュー
<span class="transparent-gradation-text">{{text}}</span>.transparent-gradation-text {
font-size: {{size}}px;
font-weight: bold;
color: transparent;
background: linear-gradient( {{degree}}deg, {{color}} 0, transparent {{interval}}% );
-webkit-background-clip: text;
}機能・使い方
- テキストに透明になるグラデーションをかけるCSS生成ツールです。
- テキストの内容、サイズ、開始色、グラデーションの角度、透明になるまでの間隔を調整できます。
- プレビューで確認しながら、お好みのデザインを作成してください。
- 生成されたHTMLとCSSをコピーして、Webサイトなどで利用できます。
CSSプロパティの説明
linear-gradient関数を使い、指定色からtransparent（透明色）へと変化するグラデーションを作成しています。
-webkit-background-clip: textを使用して、文字が徐々に消えていくような効果を実現しています。
