Split Tone Gradient Text

A split tone gradient text effect built with pure HTML and CSS that visually divides text into two distinct color zones, creating a sharp contrast across the characters without relying on JavaScript or external libraries.

Usage

This component is ideal for designs where dual meaning or visual separation should be expressed through color, such as comparison headings, themed sections (light vs dark), promotional titles, or stylistic typography that benefits from a clean two-tone identity.

Implementation

The split effect is created using CSS linear gradients with precise color stops combined with text clipping, allowing the text to appear as if it is filled with two separate color layers while keeping the letterforms crisp and selectable.

HTML

<span class="text-gradient-split">
  Split
</span>

<span class="text-gradient-split">
  Split
</span>

CSS

.text-gradient-split {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(
    180deg,
    #6366f1 0%,
    #6366f1 45%,
    #22d3ee 55%,
    #22d3ee 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-color-scheme: dark) {
  .text-gradient-split {
    background: linear-gradient(
      180deg,
      #a5b4fc 0%,
      #a5b4fc 45%,
      #67e8f9 55%,
      #67e8f9 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.text-gradient-split {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(
    180deg,
    #6366f1 0%,
    #6366f1 45%,
    #22d3ee 55%,
    #22d3ee 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-color-scheme: dark) {
  .text-gradient-split {
    background: linear-gradient(
      180deg,
      #a5b4fc 0%,
      #a5b4fc 45%,
      #67e8f9 55%,
      #67e8f9 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses two tone color division
• Creates strong visual contrast
• Maintains sharp text edges
• Designed for bold typographic statements

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.