TEXT EFFECTS

Blur Reveal Text Effect

A smooth blur reveal text animation that transitions from soft and hidden to sharp and clear. Copy the HTML and CSS for your own project.

CodeRipple

HTML
<h2 class="blur-reveal-text">
  CodeRipple
</h2>
CSS
.blur-reveal-text{
  margin:0;
  color:#ffffff;
  font-size:64px;
  font-weight:800;
  line-height:1.1;

  opacity:0;
  filter:blur(14px);
  transform:translateY(12px) scale(.96);

  animation:blurReveal 3s ease-in-out infinite;
}

@keyframes blurReveal{
  0%{
    opacity:0;
    filter:blur(14px);
    transform:translateY(12px) scale(.96);
  }

  35%{
    opacity:1;
    filter:blur(0);
    transform:translateY(0) scale(1);
  }

  75%{
    opacity:1;
    filter:blur(0);
    transform:translateY(0) scale(1);
  }

  100%{
    opacity:0;
    filter:blur(10px);
    transform:translateY(-8px) scale(.98);
  }
}

How This Blur Reveal Text Effect Works

The Blur Reveal Text Effect creates a smooth entrance and exit animation by combining opacity, blur, vertical movement, and scale. The HTML stays simple, using a single heading element with the blur-reveal-text class.

The text starts with opacity: 0, filter: blur(14px), and a small downward offset using translateY(12px). It is also slightly reduced with scale(.96), making the starting state feel soft and hidden. You can learn more about CSS blur effects in the MDN Web Docs guide to filter.

At 35% of the animation, the text becomes fully visible with opacity: 1, the blur drops to 0, and the transform returns to its normal position and scale.

From 35% to 75%, the text stays sharp and readable before beginning its exit transition.

At 100%, the text fades out again while adding a lighter 10px blur and moving upward with translateY(-8px). The slight scale(.98) keeps the exit smooth instead of abrupt.

The full animation runs for 3s with ease-in-out timing and repeats infinitely, creating a continuous reveal-and-fade text effect.

Customizing This Blur Reveal Text Effect

You can customize the Blur Reveal Text Effect by changing a few CSS values while keeping the same HTML structure. The blur strength, movement, scale, animation speed, and text appearance can all be adjusted.

  • Blur strength: Change 14px to make the starting blur softer or stronger.
  • Vertical movement: Adjust translateY(12px) and translateY(-8px) to control the entrance and exit movement.
  • Scale: Change .96 and .98 to increase or reduce the zoom effect.
  • Animation speed: Adjust 3s for a faster or slower reveal cycle.
  • Text size: Change 64px to fit different heading sizes.
  • Visible duration: Adjust the 35% and 75% keyframes to control how long the text remains sharp and readable.

Where to Use This Blur Reveal Text Effect

The Blur Reveal Text Effect works well for short headings and highlighted text where a smooth animated entrance can draw attention without making the interface feel too busy.

  • Hero headings: Reveal important titles smoothly when presenting a landing page.
  • Portfolio websites: Add motion to project names or creative headings.
  • Loading screens: Use it for short text displayed during transitions.
  • Promotional sections: Highlight campaign messages or featured content.
  • Creative websites: Add subtle motion to modern typography-focused layouts.
  • Dark interfaces: The soft blur transition works especially well against dark backgrounds.

Because the effect uses CSS keyframes with opacity, filter, and transform, the animation does not require JavaScript and remains easy to reuse.

If you want another interactive typography style, check out the Letter Spacing Hover Effect, which expands the spacing between characters and adds a soft glow on hover.

Frequently Asked Questions

Does the Blur Reveal Text Effect require JavaScript?
No. The reveal, blur, movement, and fade animation are created entirely with CSS.

How does the blur reveal animation work?
The animation gradually changes the text from blur(14px) and opacity: 0 to a sharp, fully visible state using CSS keyframes.

Can I change the animation speed?
Yes. Change the 3s animation duration to make the reveal cycle faster or slower.

Does the animation repeat automatically?
Yes. The infinite value makes the blur reveal animation repeat continuously.

The Blur Reveal Text Effect combines blur, opacity, movement, and scale to create a smooth repeating text animation. Its CSS-only structure keeps it lightweight and easy to customize for hero headings, portfolios, loading screens, and modern interfaces.

Scroll to Top