CSSグラデーションテキストジェネレーター
CSSグラデーションテキスト効果を瞬時に生成。色と方向をカスタマイズし、CSSコードをそのままコピー。
0%
100%
プレビュー
Hello World
48px
CSSコード
.gradient-text {
background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}CSSグラデーションテキストとは？
CSSグラデーションテキストは、グラデーションを背景として適用し、background-clip: textでテキスト形状にクリップする手法です。画像なしで魅力的なタイポグラフィを実現できます。
CSSでテキストにグラデーションを適用する方法
要素にグラデーション背景を設定し、-webkit-background-clip: textと-webkit-text-fill-color: transparentを適用します。background-clip: textが背景をテキスト形状にクリップし、グラデーションが文字から透けて見えます。
ブラウザ互換性
-webkit-background-clip: textはChrome、Firefox、Safari、Edgeなどすべての最新ブラウザで対応しています。標準のbackground-clip: textも広くサポートされているため、両方を併記することをおすすめします。
よくある質問
CSSでグラデーションテキストを作るには？
グラデーションを背景として適用し、-webkit-background-clip: textと-webkit-text-fill-color: transparentを使用すると、テキストからグラデーションが透けて見えます。
CSSグラデーションテキストはすべてのブラウザで動作しますか？
はい。-webkit-background-clip: textはChrome、Firefox、Safari、Edgeなどすべての最新ブラウザでサポートされています。
RadialやConicグラデーションもテキストに使えますか？
はい。すべてのCSSグラデーションタイプ（linear、radial、conic）をグラデーションテキストの背景として使用できます。
-webkit-text-fill-color: transparentが必要な理由は？
-webkit-text-fill-colorはWebKitブラウザでテキストカラーを上書きします。transparentに設定するとグラデーション背景がテキストから見えるようになります。
CSSグラデーションテキストをアニメーションにできますか？
はい。background-positionをアニメーションしたり、background-sizeとCSS @keyframesを使うことで動くグラデーションテキスト効果を作れます。
colorと-webkit-text-fill-colorの違いは何ですか？
-webkit-text-fill-colorはサポートするブラウザではcolorより優先されるため、グラデーション背景がテキストから見えるようになります。