Color Split

CSS

/* Color Split — generated with TEXT-FX
 * HTML: the element needs a data-text attribute equal to its text.
 * Font: 'Syne', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  position: relative;
  color: hsl(172 10% 90%);
}
.text-effect::before,
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.text-effect::before {
  color: hsl(172 95% 60%);
  transform: translate(-7px, 0);
}
.text-effect::after {
  color: hsl(352 95% 62%);
  transform: translate(7px, 0);
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<style>
.text-effect {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  position: relative;
  color: hsl(172 10% 90%);
}
.text-effect::before,
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.text-effect::before {
  color: hsl(172 95% 60%);
  transform: translate(-7px, 0);
}
.text-effect::after {
  color: hsl(352 95% 62%);
  transform: translate(7px, 0);
}
</style>

<div data-text="Your text" class="text-effect">Your text</div>

Related Glitch & Distortion effects

• Glitch
• Scanline Glitch
• Shake Glitch
• VHS
• Block Glitch