グラデーションテキストジェネレーター（CSS）

グラデーションテキストジェネレーター（CSS）: 用途

文字がグラデーションになった見出しは、トップページやランディングページで目を引きます。CSSだけで作れます。グラデーションをテキストの背景にし、background-clip: text でその背景を文字の形に切り抜きます。

ジェネレーターは、-webkit- 接頭辞付きのコード、未対応ブラウザー用の代替色、Windowsのハイコントラストモード用の調整を含んだコードを作成します。ご希望なら、動きを減らす設定の利用者には止まるグラデーションアニメーションも付けられます。プレビューでは見出しを明るい背景と暗い背景で確認できます。

使い方

1. テキストを入力し、フォントとサイズを選びます。
2. 色と角度を選びます。
3. CSSをコピーして、見出しにクラスを適用します。

使うタイミング

• トップページの見出し。
• 価格やキャッチコピーの強調。
• テキストのロゴ。

よくある質問

グラデーションテキストはどのように作られますか？

グラデーションは要素の背景で、background-clip: text がその背景を文字の形に切り抜きます。背景が見えるよう、文字色は透明になります。どんなフォントでも使え、テキストは選択でき、スクリーンリーダーでも読み上げられます。

-webkit- の接頭辞は必要ですか？

少し古いブラウザーは接頭辞付きでしか動作しないため、コードには -webkit-background-clip と接頭辞なしの両方が含まれます。どちらも動作しない環境では代替色が表示されます。

段落にも使えますか？

使えますが、見出しや短い強調だけにするのがおすすめです。本文ではグラデーションが読みにくく、明るい部分が背景とのコントラスト不足になることがあります。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール