テキストを入力し、最大5つのカラーストップを設定して美しいグラデーション文字を生成。HTMLのインラインスパンタグまたはCSS background-clip グラデーションコードをコピーできます。

テキスト入力

プレビューサイズ: 36px
<div class="gt-panel" style="margin-top:16px;">
  <h3>カラーストップ</h3>
  <div class="gt-stops" id="gt-stops-list"></div>
  <button class="gt-add-stop" id="gt-add-stop-btn">＋ カラーストップを追加</button>
  <div class="gt-options">
    <label class="gt-option-row">
      <input type="checkbox" id="gt-skip-spaces"> スペースをスキップ（空白に色を付けない）
    </label>
    <label class="gt-option-row">
      <input type="checkbox" id="gt-bold" checked> 太字プレビュー
    </label>
  </div>
</div>

リアルタイムプレビュー

<div class="gt-panel" style="margin-top:16px;">
  <h3>出力コード</h3>
  <div class="gt-tabs">
    <button class="gt-tab active" id="gt-tab-html" onclick="gtSwitchTab('html')">HTML（インラインスパン）</button>
    <button class="gt-tab" id="gt-tab-css" onclick="gtSwitchTab('css')">CSSグラデーション</button>
  </div>
  <div class="gt-output">
    <pre id="gt-output-code"></pre>
  </div>
  <div class="gt-btn-row">
    <button class="gt-btn gt-btn-primary" onclick="gtCopy()">コードをコピー</button>
    <button class="gt-btn gt-btn-ghost" onclick="gtReset()">リセット</button>
  </div>
</div>
コピーしました！

事業の請求書・経費管理もかんたんに

freee会計なら、請求書作成・経費精算・確定申告までクラウドで一元管理。無料トライアル実施中。 freeeを無料で試す →

配色生成 → 配色ジェネレーター

カラー変換 → RGB⇔HEX変換

確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。