Masked Reveal Text Effect

A masked reveal text effect built with pure HTML and CSS that exposes hidden text through a moving or expanding mask, creating a cinematic reveal motion while keeping the typography clean and readable without relying on JavaScript or external libraries.

Usage

This component is ideal for moments where text should be introduced with visual intrigue, such as hero headlines, section titles, landing page slogans, or feature announcements that benefit from a controlled, staged reveal.

Implementation

The masking effect is achieved using CSS clip path or overflow hidden containers combined with transform-based animations, allowing a hidden text layer to be uncovered smoothly while preserving layout stability and reusability.

HTML

<span class="text-mask">
  Reveal Text
</span>

<span class="text-mask">
  Reveal Text
</span>

CSS

.text-mask {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;

  color: transparent;

  background: linear-gradient(
    90deg,
    #FF5FCF 50%,
    rgba(17, 24, 39, 0) 50%
  );
  background-size: 200% 100%;
  background-position: 100% 0;

  -webkit-background-clip: text;
  background-clip: text;

  animation: maskReveal 900ms ease forwards;
}

@keyframes maskReveal {
  to {
    background-position: 0 0;
  }
}

@media (prefers-color-scheme: dark) {
  .text-mask {
    background: linear-gradient(
      90deg,
      #e5e7eb 50%,
      rgba(229, 231, 235, 0) 50%
    );
  }
}

.text-mask {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;

  color: transparent;

  background: linear-gradient(
    90deg,
    #FF5FCF 50%,
    rgba(17, 24, 39, 0) 50%
  );
  background-size: 200% 100%;
  background-position: 100% 0;

  -webkit-background-clip: text;
  background-clip: text;

  animation: maskReveal 900ms ease forwards;
}

@keyframes maskReveal {
  to {
    background-position: 0 0;
  }
}

@media (prefers-color-scheme: dark) {
  .text-mask {
    background: linear-gradient(
      90deg,
      #e5e7eb 50%,
      rgba(229, 231, 235, 0) 50%
    );
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses a mask style uncovering animation
• Keeps text hidden until reveal completes
• Preserves sharp text edges during motion
• Designed for dramatic text entrances

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.