25 CSS Text Animations 15 / 25

CSS Text Shadow Pulse Animation

A rhythmic pulsing text-shadow corona breathes in and out around text using multi-layer shadow animation — a hypnotic, ambient display effect.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<div class="ta-15">
  <div class="ta-15__stage">
    <h2 class="ta-15__text">PULSE</h2>
    <p class="ta-15__sub">text-shadow multi-layer · ease-in-out pulse</p>
  </div>
</div>

<div class="ta-15">
  <div class="ta-15__stage">
    <h2 class="ta-15__text">PULSE</h2>
    <p class="ta-15__sub">text-shadow multi-layer · ease-in-out pulse</p>
  </div>
</div>

.ta-15, .ta-15 *, .ta-15 *::before, .ta-15 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-15 ::selection { background: #0891b2; color: #fff; }

.ta-15 {
  --bg: #020d12;
  --core: #67e8f9;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Orbitron', 'Courier New', monospace;
}

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

.ta-15__text {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--core);
  animation: ta-15-pulse 2s ease-in-out infinite alternate;
}

.ta-15__sub {
  font-size: 0.65rem;
  color: #0c3040;
  margin-top: 1rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@keyframes ta-15-pulse {
  0% {
    text-shadow:
      0 0 2px var(--core),
      0 0 4px var(--core),
      0 0 6px #0891b2;
  }
  100% {
    text-shadow:
      0 0 8px #fff,
      0 0 20px var(--core),
      0 0 40px var(--core),
      0 0 80px #0891b2,
      0 0 120px #0c4a6e;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-15__text {
    animation: none;
    text-shadow: 0 0 10px var(--core), 0 0 30px #0891b2;
  }
}

.ta-15, .ta-15 *, .ta-15 *::before, .ta-15 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-15 ::selection { background: #0891b2; color: #fff; }

.ta-15 {
  --bg: #020d12;
  --core: #67e8f9;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Orbitron', 'Courier New', monospace;
}

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

.ta-15__text {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--core);
  animation: ta-15-pulse 2s ease-in-out infinite alternate;
}

.ta-15__sub {
  font-size: 0.65rem;
  color: #0c3040;
  margin-top: 1rem;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}

@keyframes ta-15-pulse {
  0% {
    text-shadow:
      0 0 2px var(--core),
      0 0 4px var(--core),
      0 0 6px #0891b2;
  }
  100% {
    text-shadow:
      0 0 8px #fff,
      0 0 20px var(--core),
      0 0 40px var(--core),
      0 0 80px #0891b2,
      0 0 120px #0c4a6e;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-15__text {
    animation: none;
    text-shadow: 0 0 10px var(--core), 0 0 30px #0891b2;
  }
}

How this works

The pulse is created by animating a stack of text-shadow values between a minimal tight glow (0 0 2px) and a large diffuse corona (0 0 60px). The keyframe cycles between these two states using ease-in-out timing so the expansion and contraction follow a smooth sine-like rhythm rather than a linear ping-pong.

Multiple shadow layers at different radii are interpolated simultaneously — the inner layers responding quickly to create the hot core pulse while outer layers lag behind visually due to the blending. The colour shifts slightly from white at the centre to a saturated hue at the outer glow layers, creating the impression of energy radiating outward from the letterforms themselves.

Customize

Change the pulse colour by replacing the text-shadow hues — try red/orange for a lava-lamp feel or green for a bioscanner aesthetic.
Speed up the heartbeat by setting animation-duration to 0.8s, or slow to 4s for a meditative breathing rhythm.
Add a scale pulse alongside the shadow by including transform: scale(1.02) at the peak keyframe — a subtle swell that reinforces the pulsing energy.
Layer a second element underneath with a blurred copy of the text and a contrasting glow colour for a dual-layer halo effect.
Use animation-direction: alternate with animation-timing-function: ease-in-out for the smoothest possible organic pulse without jagged transitions.

Watch out for

Large text-shadow blur radii (60px+) are expensive to render on every animation frame; limit this effect to a single focal element on the page rather than multiple instances.
The text-shadow animation interpolates all layers simultaneously — if the number of shadow layers differs between keyframe states, browsers will drop or add shadows abruptly instead of interpolating.
Shadow bleed can cross the boundaries of adjacent card components if the gallery container has overflow: hidden at a tight boundary; add padding to the card to absorb the glow spread.

Browser support

Chrome	Safari	Firefox	Edge
4+	3.1+	3.5+	4+

text-shadow animation is universally supported with no known compatibility issues in any modern browser.

More from 25 CSS Text Animations

CSS Glitch Text Effect Animation CSS Neon Glow Text Animation CSS Text Reveal Clip Animation CSS Letter Spacing Animation CSS Wave Text Animation CSS Shimmer Text Animation CSS Fade Up Stagger Text Animation CSS 3D Text Flip Animation CSS Text Stroke Draw Animation CSS Bouncing Letters Animation CSS Blur Reveal Text Animation CSS Perspective Text Rotation Animation

View the full collection →