Chromatic Offset Text Effect

A chromatic offset text effect built with pure HTML and CSS that simulates a multi-color separation by slightly shifting colored text layers, producing a digital or glitch-inspired visual style without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where stylized typography enhances visual identity, such as hero headings, banners, branding elements, creative portfolios, or callout text that should feel energetic and modern.

Implementation

The effect is created using CSS text shadow or layered pseudo elements with color offsets, allowing multiple colored copies of the same text to appear slightly displaced while maintaining a lightweight and reusable structure.

HTML

<span class="text-chromatic">
  Chromatic
</span>

<span class="text-chromatic">
  Chromatic
</span>

CSS

.text-chromatic {
  font-size: 28px;
  font-weight: 700;
  color: #e5e7eb;
  position: relative;
}

.text-chromatic::before,
.text-chromatic::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
}

.text-chromatic::before {
  color: #22d3ee;
  transform: translateX(-1px);
}

.text-chromatic::after {
  color: #6366f1;
  transform: translateX(1px);
}

.text-chromatic:hover::before,
.text-chromatic:hover::after {
  opacity: 0.6;
}

.text-chromatic {
  font-size: 28px;
  font-weight: 700;
  color: #e5e7eb;
  position: relative;
}

.text-chromatic::before,
.text-chromatic::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
}

.text-chromatic::before {
  color: #22d3ee;
  transform: translateX(-1px);
}

.text-chromatic::after {
  color: #6366f1;
  transform: translateX(1px);
}

.text-chromatic:hover::before,
.text-chromatic:hover::after {
  opacity: 0.6;
}

Usage note: add data-text="Chromatic" to the span.

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses color separated text layers
• Creates a digital or glitch style look
• Preserves readable primary text layer
• Designed for decorative typography

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.