グラデーション文字
プリセット
<!-- テキスト入力 -->
<div class="tg-field tg-full">
  <span class="tg-label">プレビューテキスト</span>
  <input type="text" id="tg-text-input" value="グラデーション文字" placeholder="テキストを入力..." maxlength="120">
</div>

<!-- グラデーション種別 -->
<div class="tg-field">
  <span class="tg-label">グラデーション種別</span>
  <div class="tg-type-group">
    <button class="tg-type-btn active" data-type="linear">線形</button>
    <button class="tg-type-btn" data-type="radial">放射状</button>
  </div>
</div>

<!-- 角度（線形用） -->
<div class="tg-field" id="tg-angle-field">
  <span class="tg-label">角度</span>
  <div class="tg-range-row">
    <input type="range" id="tg-angle" min="0" max="360" value="135">
    <span class="tg-range-val" id="tg-angle-val">135deg</span>
  </div>
</div>

<!-- カラーストップ -->
<div class="tg-field tg-full">
  <span class="tg-label">カラーストップ（2〜4個）</span>
  <div class="tg-stops-wrap" id="tg-stops-wrap"></div>
  <button class="tg-add-stop-btn" id="tg-add-stop">+ カラーストップを追加</button>
</div>

<!-- フォントサイズ -->
<div class="tg-field">
  <span class="tg-label">フォントサイズ</span>
  <div class="tg-range-row">
    <input type="range" id="tg-font-size" min="24" max="120" value="64">
    <span class="tg-range-val" id="tg-font-size-val">64px</span>
  </div>
</div>

<!-- フォントウェイト -->
<div class="tg-field">
  <span class="tg-label">フォントウェイト</span>
  <select id="tg-font-weight">
    <option value="300">300 — ライト</option>
    <option value="400">400 — レギュラー</option>
    <option value="600">600 — セミボールド</option>
    <option value="700">700 — ボールド</option>
    <option value="800" selected>800 — エクストラボールド</option>
    <option value="900">900 — ブラック</option>
  </select>
</div>

<!-- テキスト揃え -->
<div class="tg-field tg-full">
  <span class="tg-label">テキスト揃え</span>
  <div class="tg-align-group" id="tg-align-group">
    <button class="tg-align-btn active" data-align="left" title="左揃え">&#9664;</button>
    <button class="tg-align-btn" data-align="center" title="中央揃え">&#9644;</button>
    <button class="tg-align-btn" data-align="right" title="右揃え">&#9654;</button>
  </div>
</div>
生成されたCSS

仕組み

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

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

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

ブラウザ対応状況

ブラウザ対応状況
Chrome / Edge完全対応
Firefox完全対応（Firefox 122以降）
Safari完全対応（-webkit- プレフィックスが必要）
iOS Safari完全対応

活用のコツ

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

関連ツール

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

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

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

freeeで会計・請求書を自動化しませんか？

個人事業主・フリーランスの方に人気のクラウド会計サービス freee なら、領収書の自動読み取りから確定申告まで一括管理。ツール開発で忙しいあなたの経理を大幅に効率化できます。

freeeを無料で試す