25 CSS Text Animations 13 / 25

CSS Blur Reveal Text Animation

Text materialises from a hazy blur using filter:blur() transitioning to sharp focus — an atmospheric entrance effect for editorial headlines.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<div class="ta-13">
  <div class="ta-13__stage">
    <span class="ta-13__word ta-13__word--1">Clarity</span>
    <span class="ta-13__word ta-13__word--2">emerges</span>
    <span class="ta-13__word ta-13__word--3">from</span>
    <span class="ta-13__word ta-13__word--4">chaos.</span>
  </div>
</div>

<div class="ta-13">
  <div class="ta-13__stage">
    <span class="ta-13__word ta-13__word--1">Clarity</span>
    <span class="ta-13__word ta-13__word--2">emerges</span>
    <span class="ta-13__word ta-13__word--3">from</span>
    <span class="ta-13__word ta-13__word--4">chaos.</span>
  </div>
</div>

.ta-13, .ta-13 *, .ta-13 *::before, .ta-13 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-13 ::selection { background: #1e40af; color: #dbeafe; }

.ta-13 {
  --bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Playfair Display', Georgia, serif;
}

.ta-13__stage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  justify-content: center;
  align-items: baseline;
}

.ta-13__stage { max-width: 90%; }
.ta-13__word {
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  font-weight: 700;
  color: #e0e7ff;
  opacity: 0;
  filter: blur(18px);
  transform: scale(1.05);
  animation: ta-13-focus 1s ease-out forwards;
}

.ta-13__word--1 { animation-delay: 0.1s; }
.ta-13__word--2 { animation-delay: 0.45s; color: #818cf8; font-style: italic; font-weight: 400; }
.ta-13__word--3 { animation-delay: 0.8s; }
.ta-13__word--4 { animation-delay: 1.15s; color: #c7d2fe; }

@keyframes ta-13-focus {
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-13__word { animation: none; opacity: 1; filter: none; transform: none; }
}

.ta-13, .ta-13 *, .ta-13 *::before, .ta-13 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ta-13 ::selection { background: #1e40af; color: #dbeafe; }

.ta-13 {
  --bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Playfair Display', Georgia, serif;
}

.ta-13__stage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  justify-content: center;
  align-items: baseline;
}

.ta-13__stage { max-width: 90%; }
.ta-13__word {
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  font-weight: 700;
  color: #e0e7ff;
  opacity: 0;
  filter: blur(18px);
  transform: scale(1.05);
  animation: ta-13-focus 1s ease-out forwards;
}

.ta-13__word--1 { animation-delay: 0.1s; }
.ta-13__word--2 { animation-delay: 0.45s; color: #818cf8; font-style: italic; font-weight: 400; }
.ta-13__word--3 { animation-delay: 0.8s; }
.ta-13__word--4 { animation-delay: 1.15s; color: #c7d2fe; }

@keyframes ta-13-focus {
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-13__word { animation: none; opacity: 1; filter: none; transform: none; }
}

How this works

The animation starts with filter: blur(20px) and opacity: 0 applied to the text, giving it a diffuse, ghostly presence that resolves sharply into focus. The ta-13-focus keyframe eases both properties to blur(0) and opacity: 1 simultaneously over 1–2 seconds using a smooth ease-out curve that decelerates as the blur clears.

For multi-word reveals, each word or line runs the same keyframe with increasing animation-delay values, creating a sequential focus pull — like a camera slowly pulling focus from the far foreground to the near subject, revealing words one by one. Adding a slight scale(1.05) at the start keyframe and easing to scale(1) amplifies the depth-of-field camera metaphor.

Customize

Increase the initial blur radius to blur(40px) for an extremely hazy emergence, like text forming out of fog.
Add a scale component to the start state — transform: scale(1.08) blur(20px) doesn't work directly; combine with a transform: scale(1.08) alongside the filter.
Combine blur reveal with a slight vertical drift by starting with transform: translateY(-8px) and easing to translateY(0) alongside the blur for a floating-in-from-above feel.
Use on background behind-content text to create atmospheric depth — a blurred tagline that slowly sharpens while the hero content loads.
Reverse the animation (blur(0) to blur(20px)) with a trigger for an exit animation when navigating away from a section.

Watch out for

Animating filter: blur() is not GPU-composited in all browsers — it can cause CPU-bound repaints on complex pages. Use sparingly and only on single elements.
Very large blur values (blur(60px)+) on text can produce visible clipping at element boundaries; add overflow: visible and generous padding to the container.
Safari clips filter effects to the element's own bounding box more aggressively than Chrome — test that the blurred text doesn't get cropped at the edges.

Browser support

Chrome	Safari	Firefox	Edge
53+	9.1+	35+	53+

filter: blur() animation is supported in all modern browsers. GPU acceleration varies by device — test on mobile for performance.

More from 25 CSS Text Animations

CSS Perspective Text Rotation Animation CSS Text Shadow Pulse Animation CSS Liquid Fill Text Animation CSS Holographic 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

View the full collection →