25 CSS Text Animations 20 / 25

CSS Holographic Text Animation

A rotating hue-shift conic gradient combined with animated background-position creates a holographic foil shimmer on display text.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<div class="ta-20">
  <div class="ta-20__stage">
    <h2 class="ta-20__title">HOLO</h2>
    <p class="ta-20__sub">conic-gradient · background-clip: text · hue rotation</p>
  </div>
</div>

<div class="ta-20">
  <div class="ta-20__stage">
    <h2 class="ta-20__title">HOLO</h2>
    <p class="ta-20__sub">conic-gradient · background-clip: text · hue rotation</p>
  </div>
</div>

.ta-20, .ta-20 *, .ta-20 *::before, .ta-20 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-20 ::selection { background: rgba(255,255,255,0.3); color: #000; }

.ta-20 {
  --bg: #080808;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
}

.ta-20__stage { text-align: center; }

.ta-20__title {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  background-image: conic-gradient(
    from 0deg,
    hsl(0,100%,65%),
    hsl(60,100%,65%),
    hsl(120,100%,65%),
    hsl(180,100%,65%),
    hsl(240,100%,65%),
    hsl(300,100%,65%),
    hsl(360,100%,65%)
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-origin: padding-box;
  animation:
    ta-20-holo 3s linear infinite,
    ta-20-drift 7s ease-in-out infinite alternate;
  filter: saturate(1.3) contrast(1.1);
}

@keyframes ta-20-holo {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@keyframes ta-20-drift {
  from { background-position-y: 20%; }
  to   { background-position-y: 80%; }
}

.ta-20__sub {
  font-size: 0.65rem;
  color: #222;
  margin-top: 0.8rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce) {
  .ta-20__title { animation: none; background-position: 50% 50%; }
}

.ta-20, .ta-20 *, .ta-20 *::before, .ta-20 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-20 ::selection { background: rgba(255,255,255,0.3); color: #000; }

.ta-20 {
  --bg: #080808;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Syne', 'Helvetica Neue', sans-serif;
}

.ta-20__stage { text-align: center; }

.ta-20__title {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  background-image: conic-gradient(
    from 0deg,
    hsl(0,100%,65%),
    hsl(60,100%,65%),
    hsl(120,100%,65%),
    hsl(180,100%,65%),
    hsl(240,100%,65%),
    hsl(300,100%,65%),
    hsl(360,100%,65%)
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-origin: padding-box;
  animation:
    ta-20-holo 3s linear infinite,
    ta-20-drift 7s ease-in-out infinite alternate;
  filter: saturate(1.3) contrast(1.1);
}

@keyframes ta-20-holo {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@keyframes ta-20-drift {
  from { background-position-y: 20%; }
  to   { background-position-y: 80%; }
}

.ta-20__sub {
  font-size: 0.65rem;
  color: #222;
  margin-top: 0.8rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce) {
  .ta-20__title { animation: none; background-position: 50% 50%; }
}

How this works

A conic-gradient with evenly spaced full-spectrum hue stops is applied as the text's background-image and clipped to letter shapes using background-clip: text. Unlike a linear gradient shimmer, the conic gradient radiates from a centre point — rotating its hue wheel creates a whirling colour shift that mimics the angular iridescence of holographic foil as it catches light.

Two animations run simultaneously: ta-20-holo rotates the conic gradient by animating the starting hue angle via a CSS @property declaration (where supported) or approximated via background-position offset. A second subtle ta-20-drift animation slowly shifts background-position so the hue wheel precesses across the letterforms, creating the drifting rainbow quality of physical holographic material.

Customize

Increase the gradient rotation speed by reducing animation-duration on ta-20-holo from 4s to 1.5s for a faster colour wheel spin.
Add prismatic fringing by overlaying a second gradient using mix-blend-mode: screen on a ::after pseudo-element with offset timing.
Combine with a subtle filter: contrast(1.2) saturate(1.4) to punch the colours toward a more saturated foil appearance.
Apply to a logo SVG by converting text to paths and using the same gradient trick with fill: url(#holo-gradient) and an animating SVG gradient.
Use background-size: 150% 150% to zoom into the gradient wheel, reducing visible repetition and giving each letter a larger slice of the spectrum.

Watch out for

conic-gradient with background-clip: text requires both to be supported — conic-gradient arrived in Chrome 69, Safari 12.1, Firefox 83. In older browsers the text will be transparent.
CSS @property for animating the conic-gradient angle is only supported in Chrome 78+ and Safari 16.4+; the fallback background-position animation approximates but doesn't exactly replicate the effect.
The combination of large background-size values and background-clip: text can cause Safari to render the gradient in a different coordinate space — always set background-origin: padding-box.

Browser support

Chrome	Safari	Firefox	Edge
69+	12.1+	83+	69+

conic-gradient support is the limiting factor. @property-based angle animation requires Chrome 78+ / Safari 16.4+; fallback mode uses background-position.

More from 25 CSS Text Animations

CSS Perspective Text Rotation Animation CSS Text Shadow Pulse Animation CSS Liquid Fill Text Animation CSS Morphing Text Animation CSS Word Scramble Animation CSS Split Text Explosion Animation CSS Text Decryption Animation CSS Elastic Bounce Text Animation CSS Cursor Typewriter Blink Animation CSS Mask Wipe Text Reveal Animation CSS Kinetic Typography Animation CSS Typewriter Text Animation

View the full collection →