CSSグラデーションテキスト生成
.gradient-text {
background: linear-gradient(90deg, #ff0080, #7928ca);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} 使い方
テキストを入力し、カラーピッカーで2色を選び、スライダーでグラデーションの角度を調整してください。プレビューがリアルタイムで更新されます。生成されたCSSコードをコピーしてプロジェクトで使用してください。
CSSグラデーションテキストの仕組み
CSSグラデーションテキストは、背景グラデーション、background-clip: text、透明なテキスト色を組み合わせて実現します。グラデーションをテキスト要素の背景として適用し、テキストの形だけにクリップすることで表示されます。この技術はすべてのモダンブラウザで動作します。
主な用途
- ウェブサイトやランディングページの目を引く見出しを作成する。
- グラデーションロゴやブランドテキスト要素をデザインする。
- ヒーローセクションやバナーに視覚的な華やかさを加える。
- SNSグラフィックやプロモーションコンテンツをスタイリングする。
- グラデーションアクセントを使ったモダンなUIコンポーネントを構築する。
ヒント
- コントラストの強い色を使うと、グラデーション効果が最も映えます。
- グラデーションテキストは太字の大きな見出しに最適です。細い文字では効果が薄れます。
- Safariとの互換性のため、-webkitプレフィックスが必要です。
- 45°、90°、135°などの角度で対角線方向のエフェクトを試してみてください。
- 読みやすさを最大化するため、単色の背景と組み合わせましょう。
プライバシー
すべてのCSS生成はブラウザ内で完結します。データがサーバーに送信されることはありません。
よくある質問
グラデーションテキストは画像ではなく本物の文字ですか？
はい。生成されるのは linear-gradient と background-clip: text を組み合わせた CSS で、HTML 上のテキストはそのまま選択・コピー・検索が可能です。画像ではないため文字情報が保持され、SEO やアクセシビリティの面でも有利です。
入力したテキストや色はサーバーに送信されますか？
いいえ。プレビューの描画も CSS コードの生成もすべてお使いのブラウザ内で完結します。入力したテキストや選んだ色がサーバーに送信されたり保存されたりすることは一切ありません。
生成された CSS はどのブラウザで動作しますか？
background-clip: text はすべてのモダンブラウザで動作します。出力には Safari 互換のための -webkit プレフィックスが含まれており、主要ブラウザで同じ見た目を再現できます。
色は2色までですか？3色以上のグラデーションは作れますか？
本ツールは2色間の線形グラデーションを生成します。3色以上の多段グラデーションには対応していないため、その場合は出力された CSS の linear-gradient に手動でカラーストップを追加してください。
グラデーションが見えにくいときはどうすればよいですか？
細い文字や小さいフォントでは効果が薄れます。太字の大きな見出しに使い、コントラストの強い2色を選び、単色の背景と組み合わせると最もはっきり表示されます。