Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
CartesGratuit

Foil Shimmer

Trois couches CSS clippées au texte composent une dorure holographique : gradient irisé arc-en-ciel, grain métallique et balayage spéculaire en boucle. Survol = shimmer accéléré.

CSSTypographyHoverHolographic
FOIL ✦ PRO
Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Cartes en contient 41 au total, dont 6 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

Exemples d'usage

🎊

① Affiche ou générique — Titre de film, album ou événement premium

QuandEn-tête d'une landing page cinéma, musicale ou mode où le titre principal doit marquer visuellement dès la première image.
PourquoiSur des glyphes de grande taille (4–6 rem), le balayage spéculaire traverse toute la largeur des lettres et l'irisé arc-en-ciel devient pleinement lisible — l'effet ne révèle sa richesse que sur du grand texte.
Réglagesfont-size: 5rem, font-weight: 900, letter-spacing: 0.06em, fond #000, --fsh-speed: 4.5s pour un rythme lent et cinématique.
🏆

② Badge de tier — Étiquette « PRO » sur une carte tarifaire

QuandPage pricing ou tableau de fonctionnalités : le badge foil-border identifie le plan premium au premier coup d'œil, sans couleur de fond qui clasherait avec le reste de l'UI.
PourquoiLa variante pastille (.fsh-pill) tient en 2 px de padding et border-radius: 20px — parfaite pour un badge compact (≈ 70 × 28 px) qui ne prend pas la place d'un CTA.
Réglagesfont-size: 0.85rem, letter-spacing: 0.1em, .fsh-inner { background: #0f0c22 } pour coller au fond de la carte premium.
🚀

③ Hero e-commerce luxe — Titre « Édition Limitée » ou lancement de collection

QuandBloc hero d'une page produit capsule, collaboration ou drop limité où la rareté doit être signifiée avant le scroll.
PourquoiL'association grain métallique et irisé or–cyan–violet évoque une impression foil à chaud que ni un text-shadow ni une image statique ne reproduisent. Le shimmer lent renforce la perception de luxe.
Réglagesfont-size: 4rem, --fsh-speed: 5s (rythme lent = sophistication), fond #060610, texte en majuscules avec letter-spacing: 0.08em.

Comment ça marche

L'effet superpose trois background-image sur .fsh-text, tous attachés aux glyphes via background-clip: text et -webkit-text-fill-color: transparent. Cette technique remplace la couleur de texte par un fond rendu à l'intérieur des formes de lettres — sans canvas, sans SVG.

La troisième couche (blend normal) est le gradient irisé à 135° — or → rose → argent → cyan → violet → argent → or — étalé sur 300 % de largeur. La deuxième couche (blend overlay) est un repeating-linear-gradient à 104° de micro-hachures métalliques semi-transparentes (blanc à 7 % et or à 4 %, toutes les 1–4 px) qui simule le grain d'un film métallisé. La première couche (blend screen) est le balayage spéculaire : un biseau blanc translucide à 108° qui traverse le texte et produit l'éclat « hot-stamp ».

L'animation fsh-pan translate background-position en boucle linéaire sur le gradient irisé et le balayage, créant l'illusion d'une lumière qui se déplace sur la surface foil. La durée est pilotée par la variable CSS --fsh-speed (défaut 3.2s), surchargée à 0.7s au survol de .fsh-foil.

La variante pastille ajoute une bordure foil via un linear-gradient de fond sur .fsh-pill (padding 2 px, border-radius: 20px), animé par fsh-pan-border. L'élément .fsh-inner porte un fond sombre qui laisse transparaître uniquement la bordure animée.

Accessibilité

  • prefers-reduced-motion non géré dans le code fourni — l'animation tourne quelles que soient les préférences système. Ajoutez @media (prefers-reduced-motion: reduce) { .fsh-text { animation: none; } } si votre audience inclut des utilisateurs sensibles au mouvement.
  • Le texte reste dans le flux DOM normal (<span>) : les lecteurs d'écran lisent le contenu sans accéder au fond CSS.
  • -webkit-text-fill-color: transparent annule la couleur de secours du navigateur. Si background-clip: text n'est pas supporté, le texte devient invisible. Ajoutez color: gold (ou toute couleur lisible) sur .fsh-text comme repli explicite.
  • L'effet est purement décoratif et agit uniquement sur la vitesse au survol — aucune information n'est transmise par cet état seul. Convient pour des titres larges, pas pour du texte fonctionnel.
  • Contraste : sur fond très sombre (#000), les tons or et blanc de l'irisé dépassent 4,5:1 localement, mais la mesure WCAG d'un texte multicolore animé reste complexe. Réserver à des titres larges (≥ 1.5rem), jamais au corps de texte.

Compatibilité navigateur

Nécessite background-clip: text et background-blend-mode — supportés dans tous les navigateurs modernes depuis 2016–2018. Zéro JS, zéro dépendance.

Chrome 63+✓ Complet
Firefox 59+✓ Complet
Safari 8+✓ Complet
Edge 79+✓ Complet
Mobile iOS✓ Complet
Android Chrome✓ Complet

Sans background-clip: text, le dégradé s'affiche en fond derrière le texte (texte opaque coloré). Définissez color sur .fsh-text pour garder le texte lisible dans ce cas.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

HTML 
<div class="fsh-demo">
  <span class="fsh-foil">
    <span class="fsh-text fsh-big">FOIL</span>
  </span>
  <span class="fsh-pill">
    <span class="fsh-inner">
      <span class="fsh-foil">
        <span class="fsh-text">✦ PRO</span>
      </span>
    </span>
  </span>
</div>
CSS 
.fsh-demo  {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 18px;
   }

.fsh-foil  {
   display: inline-block;
   }

.fsh-text  {
   background-image: linear-gradient(108deg, transparent 30%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.5) 53%, transparent 70%), repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 3px, rgba(200, 175, 90, 0.04) 3px, rgba(200, 175, 90, 0.04) 4px, transparent 4px, transparent 6px), linear-gradient(135deg, rgb(255, 215, 0) 0%, rgb(255, 192, 203) 18%, rgb(232, 234, 240) 36%, rgb(0, 229, 255) 54%, rgb(199, 125, 255) 72%, rgb(232, 234, 240) 84%, rgb(255, 215, 0) 100%);
   background-size: 350% 100%, auto, 300% 100%;
   background-position: -120% 0px, 0px 0px, 0% 50%;
   background-blend-mode: screen, overlay, normal;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
   display: inline-block;
   font-weight: 900;
   animation: fsh-pan var(--fsh-speed, 3.2s) linear infinite;
   }

.fsh-big  {
   font-size: 3.2rem;
   letter-spacing: 0.04em;
   }

.fsh-foil:hover .fsh-text  {
   --fsh-speed: .7s;
   }

.fsh-pill  {
   display: inline-block;
   padding: 2px;
   border-radius: 20px;
   background: linear-gradient(135deg, rgb(255, 215, 0), rgb(255, 192, 203) 25%, rgb(0, 229, 255) 55%, rgb(199, 125, 255) 80%, rgb(255, 215, 0)) 0% 0% / 300% 100%;
   animation: 3.2s linear 0s infinite normal none running fsh-pan-border;
   }

@keyframes fsh-pan  {
   
  0%  {
   background-position: -120% 0px, 0px 0px, 0% 50%;
   }
  40%  {
   background-position: -120% 0px, 0px 0px, 120% 50%;
   }
  65%  {
   background-position: 270% 0px, 0px 0px, 195% 50%;
   }
  100%  {
   background-position: 270% 0px, 0px 0px, 300% 50%;
   }
}

@keyframes fsh-pan-border  {
   
  100%  {
   background-position: 300% 50%;
   }
}

.fsh-inner  {
   display: inline-block;
   background: rgb(16, 16, 24);
   border-radius: 18px;
   padding: 6px 14px;
   }

.fsh-pill .fsh-text  {
   font-size: 0.85rem;
   letter-spacing: 0.1em;
   }
JavaScript (fx-0822) 
// Effet CSS pur — pas de JavaScript nécessaire

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
--fsh-speed 3.2s Variable CSS sur .fsh-foil : durée d'un cycle complet de shimmer. 5s = luxe lent, 1.5s = tech rapide.
--fsh-speed (hover) 0.7s Vitesse accélérée au survol, définie dans .fsh-foil:hover .fsh-text { --fsh-speed: .7s }. Ajustez cette valeur pour doser l'intensité de la réaction.
gradient irisé (3e layer) or → rose → argent → cyan → violet Troisième couche de background-image sur .fsh-text. Remplacez les arrêts de couleur pour une palette argent monochrome, brand, ou arc-en-ciel intégral.
font-size sur .fsh-big 3.2rem Taille du texte grand. L'effet foil n'est pleinement visible qu'à partir de 1,5 rem ; préférez 3 rem ou plus pour les titres.
background-size (1re valeur, sweep) 350% Largeur du balayage spéculaire. Augmentez (ex. 500%) pour un balayage plus doux ; réduisez (200%) pour un éclat plus concentré.
.fsh-inner background rgb(16,16,24) Fond intérieur de la pastille. Adaptez à la couleur de fond de votre page pour que seule la bordure foil reste visible.
border-radius sur .fsh-pill 20px Arrondi de la pastille. 20px = pilule arrondie ; 6px = badge quasi-rectangulaire.

FAQ

L'animation fsh-pan n'est pas dans le code fourni — comment l'ajouter ?

La règle @keyframes fsh-pan est absente du snippet. Ajoutez-la dans votre CSS : @keyframes fsh-pan { 0% { background-position: -120% 0, 0 0, 0% 50%; } 100% { background-position: 220% 0, 0 0, 300% 50%; } }. Sans elle, le shimmer reste statique mais le rendu foil de base reste visible.

Peut-on appliquer l'effet à n'importe quelle police ?

Oui — mais le grain et l'irisé ne sont vraiment lisibles que sur des glyphes larges. Préférez des polices bold (700–900) ou des condensed serif. Les polices fines ne montrent qu'une fine ligne irisée. Le rendu est optimal à partir de 3 rem et font-weight: 900.

L'effet fonctionne-t-il sans JavaScript ?

Oui — Foil Shimmer est 100 % CSS. Aucun JS n'est requis pour le shimmer ni pour la bordure foil animée de la pastille. Il s'intègre dans un template statique, un CMS ou un email HTML supportant les animations CSS.