Type your text, pick up to 5 color stops, and generate a beautiful color gradient across every character. Preview the result live, then copy the HTML (inline color spans) or the CSS background-clip gradient version.

Your Text

Preview size: 36px
<div class="gt-panel" style="margin-top:16px;">
  <h3>Color Stops</h3>
  <div class="gt-stops" id="gt-stops-list"></div>
  <button class="gt-add-stop" id="gt-add-stop-btn">+ Add Color Stop</button>
  <div class="gt-options">
    <label class="gt-option-row">
      <input type="checkbox" id="gt-skip-spaces"> Skip spaces (no color on spaces)
    </label>
    <label class="gt-option-row">
      <input type="checkbox" id="gt-bold" checked> Bold preview
    </label>
  </div>
</div>

Live Preview

<div class="gt-panel" style="margin-top:16px;">
  <h3>Output</h3>
  <div class="gt-tabs">
    <button class="gt-tab active" id="gt-tab-html" onclick="gtSwitchTab('html')">HTML (inline spans)</button>
    <button class="gt-tab" id="gt-tab-css" onclick="gtSwitchTab('css')">CSS gradient</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()">Copy Output</button>
    <button class="gt-btn gt-btn-ghost" onclick="gtReset()">Reset</button>
  </div>
</div>
Copied!

Generate color schemes → Color Scheme Generator

Convert colors → RGB HEX Converter