Gradient Text
Presets
<!-- Text input -->
<div class="tg-field tg-full">
  <span class="tg-label">Preview Text</span>
  <input type="text" id="tg-text-input" value="Gradient Text" placeholder="Type your text..." maxlength="120">
</div>

<!-- Gradient type -->
<div class="tg-field">
  <span class="tg-label">Gradient Type</span>
  <div class="tg-type-group">
    <button class="tg-type-btn active" data-type="linear">Linear</button>
    <button class="tg-type-btn" data-type="radial">Radial</button>
  </div>
</div>

<!-- Angle (linear) -->
<div class="tg-field" id="tg-angle-field">
  <span class="tg-label">Angle</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>

<!-- Color stops -->
<div class="tg-field tg-full">
  <span class="tg-label">Color Stops (2–4)</span>
  <div class="tg-stops-wrap" id="tg-stops-wrap"></div>
  <button class="tg-add-stop-btn" id="tg-add-stop">+ Add Color Stop</button>
</div>

<!-- Font size -->
<div class="tg-field">
  <span class="tg-label">Font Size</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>

<!-- Font weight -->
<div class="tg-field">
  <span class="tg-label">Font Weight</span>
  <select id="tg-font-weight">
    <option value="300">300 — Light</option>
    <option value="400">400 — Regular</option>
    <option value="600">600 — Semibold</option>
    <option value="700">700 — Bold</option>
    <option value="800" selected>800 — Extrabold</option>
    <option value="900">900 — Black</option>
  </select>
</div>

<!-- Text align -->
<div class="tg-field tg-full">
  <span class="tg-label">Text Align</span>
  <div class="tg-align-group" id="tg-align-group">
    <button class="tg-align-btn active" data-align="left" title="Left">&#9664;</button>
    <button class="tg-align-btn" data-align="center" title="Center">&#9644;</button>
    <button class="tg-align-btn" data-align="right" title="Right">&#9654;</button>
  </div>
</div>
Generated CSS

How It Works

CSS text gradients use the background-clip: text technique:

  1. Apply a gradient to the element’s background property.
  2. Clip the background to the text shape with -webkit-background-clip: text and background-clip: text.
  3. Make the text itself transparent with -webkit-text-fill-color: transparent.

The result is gradient-painted characters with no SVG or images required — pure CSS.

Browser Compatibility

BrowserSupport
Chrome / EdgeFull
FirefoxFull (Firefox 122+)
SafariFull (-webkit- prefix required)
iOS SafariFull

Tips for Best Results

  • High contrast presets (Sunset, Fire, Neon) work best on dark backgrounds.
  • Pastel gradients suit light-mode body text at large sizes.
  • Always include both -webkit-background-clip: text and background-clip: text for cross-browser safety.
  • Add display: inline-block so the gradient clips correctly; block elements expand to full width and may show extra gradient area.

Build background gradients → CSS Gradient Generator

Generate color palettes → Color Palette Generator

Create box shadows → CSS Box Shadow Generator