Animations/Shiny Text

Shiny Text

Texte avec reflet brillant qui balaye en continu. Background-clip text + gradient anime.

autoCSStextshimmerpremium
Trigger: Automatique (boucle)
CSS requis: Non
Difficulte: easy

Preview live

Code

.shiny-text {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.6) 0%,
    rgba(225,255,108,0.9) 25%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.3) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine-sweep 3s linear infinite;
}

CSS requis

@keyframes shine-sweep {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

Instructions

Technique background-clip: text avec un gradient anime. Le gradient se deplace de gauche a droite en continu. Ajustez les couleurs, la taille (200%) et la vitesse (3s). Usage: <span className='shiny-text'>Texte</span>.