CSSテキストグラデーション生成ツール

テキストにグラデーションを適用するCSSを生成します。プレビューを見ながらカスタマイズできます。

開始色

終了色

角度: 90°

プレビューテキスト

プレビュー

Gradient Text

生成されたCSS

.gradient-text {
  background: linear-gradient(90deg, #ff0080, #7928ca);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

プリセット

CSSテキストグラデーション生成ツールとは？

テキストにグラデーションを適用するCSSコードを生成します。 background-clip: textを使用して、背景のグラデーションをテキストにクリッピングします。

プレビューを見ながら色や角度を調整でき、生成されたCSSをコピーしてすぐに使用できます。すべての処理はブラウザ内で行われます。