CSSテキストグラデーション ジェネレーター — 無料ツール

仕組み

CSSテキストグラデーションは background-clip: text を使ったテクニックです。

1. 要素の background プロパティにグラデーションを適用する。
2. -webkit-background-clip: text と background-clip: text で背景をテキスト形状に切り抜く。
3. -webkit-text-fill-color: transparent でテキスト自体を透明にする。

SVGや画像は不要で、純粋なCSSだけでグラデーション文字を実現できます。

ブラウザ対応状況

活用のコツ

• コントラストの高いプリセット（サンセット、ファイア、ネオン）はダーク背景で映えます。
• パステル系グラデーションは大きな見出しテキストのライトモードに最適です。
• クロスブラウザ対応のため -webkit-background-clip: text と background-clip: text の両方を必ず記述してください。
• グラデーションが正しくクリップされるよう display: inline-block を付与してください。block 要素は横幅いっぱいに広がり、グラデーションの見え方が変わります。

関連ツール

背景グラデーションを作成 → CSSグラデーションジェネレーター

カラーパレットを生成 → カラーパレットジェネレーター

ボックスシャドウを作成 → CSSボックスシャドウジェネレーター