About this snippet

A gradient runs through the text and slides sideways on a loop, giving a headline a moving highlight.

It works through background-clip set to text with a transparent fill color, so the gradient only shows inside the letter shapes. Animating background-position is what moves it. The gradient is deliberately wider than the element, which is what hides the restart.

It needs a heavy font weight to read properly. At lighter weights there is not enough letter surface for the gradient to show, and the effect mostly vanishes.

Size
745 bytes
Uses
HTML, CSS
Loads
Nothing external
Views
711

Collections

Related snippets

<div class="hero-text">
  <h1>Build The <span class="shine">Future</span></h1>
</div>
* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #0f172a;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 4rem;
  font-weight: 800;
  color: white;
  margin: 0;
  letter-spacing: -2px;
}
.shine {
  background: linear-gradient(
    to right, 
    #a855f7 0%, 
    #ec4899 40%, 
    #fff 50%, 
    #ec4899 60%, 
    #a855f7 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 3s linear infinite;
}
@keyframes shine {
  to {
    background-position: 200% center;
  }
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save