Astuce CSS rapide ! Texte animé en dégradé

Créons cet effet de texte animé avec dégradé à l'aide de propriétés personnalisées de portée et de background-clip.

Jhey Tompkins

Accédez à CodePen et créez un nouveau canevas.

Créez le balisage de votre texte. Utilisons un en-tête avec le mot « Speedy » :

<h1 class="boujee-text">Hello!</h1>

Ensuite, donnons à notre body un background-color plus foncé :

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

Augmentez la valeur font-size de notre texte. Utilisez clamp pour le rendre responsif :

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

Créez deux propriétés personnalisées pour les couleurs que nous allons utiliser. Appliquez un linear-gradient au background à l'aide de ces couleurs et faites-le pivoter de 90 degrés :

.boujee-text {
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / 100% 100%;
}

Créez une propriété personnalisée que vous pouvez utiliser pour la taille horizontale de l'arrière-plan. Utilisez-la pour background-size-x :

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
}

Pour rogner l'arrière-plan sur le texte, définissez color sur transparent et background-clip: text:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

À ce stade, vous pouvez laisser le code tel quel et tester le background-position et le dégradé utilisés dans le background-image. Vous pouvez également animer ce dégradé dans votre texte. Commencez par définir une image clé pour l'animation. La propriété personnalisée --bg-size que vous avez définie précédemment sera utilisée. Voici un bon exemple de propriétés personnalisées de portée qui facilitent la maintenance.

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

Appliquez ensuite l'animation à l'aide de animation:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

Pour aller plus loin, vous pouvez encapsuler votre code d'animation dans une requête multimédia afin de respecter les préférences de mouvement de l'utilisateur :

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

Terminé ! 🎉 Vous avez créé un texte avec dégradé animé en CSS à l'aide de propriétés personnalisées de portée et de background-clip.

Voici ce conseil sous forme de vidéo rapide : ⚡️

Préférez-vous le formulaire de tweet ? 🐦

Restez génial ! ʕ •ᴥ•ʔ

Image principale par Vladislav Klapin sur Unsplash