Directional Sheen Gradient Text

A directional sheen gradient text effect built with pure HTML and CSS that creates the illusion of a light reflection passing across the characters, producing a polished, metallic style highlight without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where text should appear glossy or premium, such as hero headings, product labels, feature highlights, or call-to-action text that benefits from a subtle light-sweep animation rather than static color fills.

Implementation

The sheen effect is achieved using CSS linear gradients, background position animation, and text clipping, allowing a bright highlight band to travel across the text in a chosen direction while keeping the letterforms sharp and readable.

HTML

<span class="text-sheen">
  Sheen Text
</span>

<span class="text-sheen">
  Sheen Text
</span>

CSS

.text-sheen {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(
    120deg,
    #6366f1 30%,
    #22d3ee 50%,
    #6366f1 70%
  );
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 260ms ease;
}

.text-sheen:hover {
  background-position: 100% 0;
}

@media (prefers-color-scheme: dark) {
  .text-sheen {
    background: linear-gradient(
      120deg,
      #a5b4fc 30%,
      #67e8f9 50%,
      #a5b4fc 70%
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.text-sheen {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(
    120deg,
    #6366f1 30%,
    #22d3ee 50%,
    #6366f1 70%
  );
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 260ms ease;
}

.text-sheen:hover {
  background-position: 100% 0;
}

@media (prefers-color-scheme: dark) {
  .text-sheen {
    background: linear-gradient(
      120deg,
      #a5b4fc 30%,
      #67e8f9 50%,
      #a5b4fc 70%
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Simulates a light reflection sweep
• Adds a polished, glossy appearance
• Preserves text clarity during animation
• Designed for accent and headline typography

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.