Holographic Effect
Un dégradé arc-en-ciel (magenta→cyan→jaune→vert) animé en diagonale sur fond sombre — reflet holographique 100 % CSS, zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur une seule propriété animée : background-position. Le linear-gradient(125deg, …) est composé de cinq stops RGBA semi-transparents (opacité ~0,45) appliqués sur le fond #0a0a0f — le noir filtre à travers chaque couleur et produit la profondeur nacrée caractéristique des surfaces holographiques.
Le dégradé est dimensionné à 200 % × 200 % via background-size: 200% 200%, soit le double du conteneur dans les deux axes. L'animation @keyframes holographic déplace le point d'ancrage de 0% 0% à 200% 200% en 8 secondes (linéaire, boucle infinie) — la nappe colorée glisse en diagonale derrière le contenu.
La séquence des stops (rgba(255,0,255) → rgba(0,255,255) → rgba(255,255,0) → rgba(0,255,0) → rgba(255,0,255)) ferme le cycle : le premier et le dernier stop sont identiques, rendant la boucle parfaitement continue sans saut visible. L'angle 125° oriente le défilement en diagonale descendante droite, signature visuelle de l'hologramme classique.
Accessibilité
- prefers-reduced-motion : le code de l'effet ne contient pas de règle
@media (prefers-reduced-motion: reduce)— à ajouter lors de l'intégration :@media (prefers-reduced-motion: reduce) { .bg-holographic { animation: none; } }. - L'effet est une décoration visuelle pure (fond) ; le contenu overlay doit porter ses propres attributs
role,aria-labeletalt. - Appliquez
aria-hidden="true"sur l'élément.bg-holographics'il ne contient aucun texte — il joue uniquement le rôle de fond décoratif. - Contraste du texte overlay : le fond oscille entre noir profond et couleurs vives saturées — utiliser un scrim (
rgba(0,0,0,0.45)) ou du texte blanc avectext-shadowpour garantir WCAG AA (ratio ≥ 4,5:1). - Aucune interaction clavier ni gestion de focus n'est produite par l'effet (animation CSS passive) — aucun piège de focus à risquer.
Compatibilité navigateur
Nécessite @keyframes, background-size et linear-gradient avec valeurs RGBA — supportés dans tous les navigateurs modernes depuis 2016.
Sans support <code>@keyframes</code>, le dégradé s'affiche statiquement — les couleurs holographiques restent visibles, sans défilement. Aucune erreur JS, le contenu overlay demeure lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-holographic" style="position:relative;min-height:300px;overflow:hidden;">
<!-- Scrim optionnel pour lisibilité du texte -->
<div style="position:absolute;inset:0;background:rgba(0,0,0,0.35);pointer-events:none;" aria-hidden="true"></div>
<!-- Contenu overlay -->
<div style="position:relative;z-index:1;padding:2rem;">
<h2>Votre titre</h2>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| animation-duration (8s) | 8s | Durée d'un cycle complet. Augmenter (12–20 s) pour un mouvement doux et discret ; réduire (4–6 s) pour un rendu pulsé et énergique. |
| Stops RGBA dans linear-gradient | magenta→cyan→jaune→vert→magenta | Remplacez les valeurs rgba(R,G,B,.45) pour changer la palette. Gardez le premier et le dernier stop identiques pour un cycle sans saut visible. |
| background-size (200% 200%) | 200% 200% | Taille du dégradé par rapport au conteneur. Augmenter à 300 % ou plus pour un défilement plus long et des transitions de couleurs plus douces. |
| Angle 125deg dans linear-gradient | 125deg | Orientation du dégradé. 90deg = vertical pur, 135deg = diagonale classique, 45deg = diagonale montante. |
| Valeurs alpha (.45 / .40) | 0.45 / 0.40 | Opacité de chaque stop sur le fond sombre. Augmenter vers 0,7–0,9 pour des couleurs vives et saturées ; réduire vers 0,2 pour un irisé très subtil. |
| animation-timing-function (linear) | linear | Remplacer par ease-in-out pour un ralentissement aux extrémités — le dégradé « respire » plutôt que de défiler uniformément. |
FAQ
.bg-holographic ne pose que des propriétés background et animation. Elle fonctionne sur une <div>, un <section>, un <button> ou toute balise acceptant un fond CSS. Pensez à ajouter overflow: hidden pour que l'animation reste clippée dans les éléments avec border-radius.element.style.animationPlayState = 'paused' ; pour la reprendre : 'running'. Pour la désactiver sur une préférence utilisateur, ajoutez @media (prefers-reduced-motion: reduce) { .bg-holographic { animation: none; } } dans votre feuille de style.#0a0a0f) : les stops RGBA semi-transparents se fondent avec le noir pour produire l'aspect irisé. Sur fond blanc, les mêmes stops donnent des tons pastel très délavés — remplacez alors les valeurs alpha par 0,7–0,9 et ajustez les teintes pour maintenir l'impact visuel.
