テキストグラデーションのCSS作成ツール
テキストに2色または3色の美しいグラデーションをかけるCSSを簡単に作成できるCSSジェネレーターです。
プレビュー
<span class="text-gradation">{{text}}</span>.text-gradation {
font-size: {{size}}px;
font-weight: bold;
color: transparent;
background: {{gradient_def}};
-webkit-background-clip: text;
}機能・使い方
- テキストに鮮やかなグラデーションをかけるCSS生成ツールです。
- 2色または3色のグラデーションを選択できます。
- プレビューを確認しながら、色や角度、文字サイズを調整してください。
- 生成されたHTMLとCSSをコピーして、Webサイトなどで利用できます。
CSSプロパティの説明
backgroundプロパティのlinear-gradient関数でグラデーションを作成し、-webkit-background-clip: textを指定して背景色をテキストの形に切り抜くことで、文字自体がグラデーションしているように見せています。
この手法を使う場合、本来の文字色はcolor: transparentにする必要があります。
