Directional Flow Gradient Text

A directional flow gradient text effect built with pure HTML and CSS that animates color across the text in a defined direction (left-to-right, top-to-bottom, or diagonal), creating a sense of motion and progression without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where directional movement reinforces meaning, such as progress related headings, forward action labels, onboarding steps, or dynamic banners where color flow visually supports the idea of transition or motion.

Implementation

The flow effect is achieved using CSS linear gradients, background position animation, and text clipping techniques, allowing the gradient layer to travel steadily across the characters while preserving sharp edges and layout stability.

HTML

<span class="text-gradient-flow">
  Flow Text
</span>

<span class="text-gradient-flow">
  Flow Text
</span>

CSS

.text-gradient-flow {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(
    90deg,
    #BE9FE1,
    #C9B6E4,
    #E1CCEC
  );
  background-size: 300% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 2.4s ease infinite;
}

@keyframes gradientFlow {
  to {
    background-position: 300% 0;
  }
}

@media (prefers-color-scheme: dark) {
  .text-gradient-flow {
    background: linear-gradient(
      90deg,
      #a5b4fc,
      #67e8f9,
      #a5b4fc
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.text-gradient-flow {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(
    90deg,
    #BE9FE1,
    #C9B6E4,
    #E1CCEC
  );
  background-size: 300% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 2.4s ease infinite;
}

@keyframes gradientFlow {
  to {
    background-position: 300% 0;
  }
}

@media (prefers-color-scheme: dark) {
  .text-gradient-flow {
    background: linear-gradient(
      90deg,
      #a5b4fc,
      #67e8f9,
      #a5b4fc
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Supports custom flow direction
• Creates motion using color instead of position
• Keeps typography crisp during animation
• Designed for motion oriented text emphasis

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.