CSSグラデーションテキストジェネレータ
CSSでグラデーションテキスト効果を作成します。色、角度、グラデーションタイプを選択します。コピー可能なCSSコードを使用したライブプレビュー。
Presets
Text
Font size72px
Gradient
Angle90°
Color stops
#ec48990%
#a855f750%
#3b82f6100%
Preview
Gradient Text
CSS Output
background: linear-gradient(90deg, #ec4899 0%, #a855f7 50%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
CSSグラデーションテキストジェネレータの使い方
- 1テキストを入力してフォントサイズを調整します。
- 2グラデーションタイプと角度を選択します。
- 3カラーストップを追加して位置を調整します。
- 4生成されたCSSをプロジェクト用にコピーします。
Zenovayアナリティクス
関連ツール
CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。よくある質問
CSSグラデーションテキストはどのように機能するか？▾
CSSグラデーションテキストは3つのプロパティを使用します：グラデーション背景、background-clip: textは背景をテキスト図形にクリップし、color: transparentはテキスト塗りつぶしを透明にしてグラデーションが表示されるようにします。このテクニックはすべてのCSSグラデーションで機能します。
グラデーションテキストのブラウザサポートは何か？▾
background-clip: textはすべての最新ブラウザでサポートされています。Chrome、Edge、およびSafariは-webkitプリフィックス（-webkit-background-clip: text）が必要です。Firefoxはプリフィックス付きとプリフィックスなしの両方をサポートしています。最大の互換性のために常に両方を含めてください。
background-clip: textは何を行うか？▾
background-clip: textは要素の背景をそのテキスト内容でカバーされた領域にクリップします。これがないと、グラデーションは要素ボックス全体を塗りつぶします。透明なテキスト色と組み合わせると、グラデーションで満たされたテキストの効果を作成します。
グラデーションテキストをアニメーション化できるか？▾
はい。より大きなbackground-size（例：200% 200%）を使用し、@keyframesでbackground-positionをアニメーション化します。グラデーションはテキスト形のクリップマスクの背後でスライドし、流れるような色の効果を作成します。スムーズなアニメーションのためにwill-change: background-positionを使用します。
グラデーションテキストでアクセシビリティの懸念があるか？▾
グラデーションテキストは背景に対して可変コントラストを持つことができます。グラデーションの最暗部がWCAGコントラスト比（通常のテキストで4.5：1、大きなテキストで3：1）を満たしていることを確認します。スクリーンリーダーは視覚的スタイリングに関係なくテキストを正常に読み取ります。