Holographic
Carte en verre teinté aux reflets arc-en-ciel défilant en continu — effet 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. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur un linear-gradient(135deg) à quatre stops RGBA — rose vif, cyan, jaune, vert menthe — étalé à 400% 400%, soit quatre fois la surface de la carte. L'@keyframes holographic déplace la propriété background-position de 0 50% à 100% 50% puis revient en 5 s, produisant un balayage horizontal continu du spectre arc-en-ciel.
Chaque stop utilise une opacité de 0,3 — les teintes se posent sur le fond sombre #12121a en restant translucides, imitant la laque holographique réelle qui irise sans saturer. Quand la carte est placée sur un fond différent (image, vidéo, autre gradient), les couleurs interagissent avec ce qui transparaît — l'aspect visuel change selon le contexte d'intégration.
La couche backdrop-filter: blur(10px) ajoute l'effet glassmorphism : le contenu situé derrière la carte est fondu, donnant l'impression d'un verre dépoli. Le filet border: 1px solid rgba(255,255,255,.2) trace un contour lumineux subtil qui ancre la carte dans la scène.
L'animation est gérée entièrement par le moteur CSS du navigateur — aucun JavaScript n'est requis. Ajoutez will-change: background-position pour déclencher l'accélération GPU sur les appareils qui ne l'activent pas par défaut.
Accessibilité
- prefers-reduced-motion absent : le code source ne contient aucune règle
@media (prefers-reduced-motion: reduce)— l'animation tourne en boucle infinie quel que soit le paramètre OS. À ajouter si la carte reste visible en continu :@media (prefers-reduced-motion: reduce) { .card-holographic { animation: none; } }. - Aucun attribut ARIA (
aria-hidden,role,aria-label) n'est présent dans la structure de base — le texte contenu dans la carte est lu directement par les lecteurs d'écran, ce qui est correct si la carte est un composant fonctionnel. - Aucune interaction JavaScript : l'effet est purement décoratif et ne capture ni clic ni événement clavier.
- Contraste du texte : blanc (
#fff) sur fond rendu ≈#161624→ ratio ≥ 7:1, niveau WCAG AAA respecté. - Le
backdrop-filterest invisible à l'arbre d'accessibilité — les lecteurs d'écran voient uniquement le contenu textuel de la carte.
Compatibilité navigateur
Nécessite linear-gradient, animation CSS et backdrop-filter. Les deux premiers sont universels ; backdrop-filter est supporté nativement depuis Chrome 76, Firefox 103 et Safari 9.
Sans backdrop-filter (Firefox < 103 sans préfixe), la carte s'affiche sans flou — l'animation arc-en-ciel reste entièrement fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="card-demo card-holographic">
<!-- Contenu libre : texte, icône, badge -->
<span>Votre contenu</span>
</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 |
|---|---|---|
| --bg-card | #12121a | Couleur de fond de base sous le dégradé. Un fond plus clair rend les reflets plus pastels ; #000 les intensifie. |
| --radius-xl | 1rem | Rayon des coins arrondis. 20px pour une carte large, 50% pour un badge circulaire. |
| Couleurs gradient (4 stops rgba) | rose, cyan, jaune, vert | Modifiez les hex dans linear-gradient(135deg, rgba(255,0,150,.3), …). Utilisez 2 à 6 stops brand pour une iridescence monochrome ou complémentaire. |
| background-size | 400% 400% | 200% 200% resserre les couleurs, 600% 600% produit un balayage très progressif entre les teintes. |
| animation-duration | 5s | Durée d'un cycle complet. 3 s = scintillement rapide, 8 s = reflet lent et élégant. |
| animation-timing-function | ease | linear pour un balayage uniforme, ease-in-out pour un effet de respiration plus marqué aux extrémités. |
| backdrop-filter blur | 10px | Rayon du flou glassmorphism. 20px pour un verre épais, 0 pour supprimer entièrement l'effet dépoli. |
| border opacity | rgba(255,255,255,.2) | Opacité du filet lumineux. rgba(255,215,0,.45) pour un bord doré, .5 pour un contour plus visible. |
FAQ
holographic est pilotée par @keyframes natif — aucune ligne de JS n'est nécessaire. Copiez la classe .card-holographic et le bloc @keyframes, et appliquez-les à n'importe quel div.animation-delay: -Xs à chaque carte (ex. -0s, -1.6s, -3.3s). Les délais négatifs font démarrer l'animation à mi-cycle, supprimant le synchronisme visuel sans modifier la durée.backdrop-filter n'est supporté nativement qu'à partir de Firefox 103. Pour les versions antérieures, il faut activer le flag layout.css.backdrop-filter.enabled dans about:config. En production, ajoutez un fond de repli : background: rgba(18,18,26,.88) sur .card-holographic pour que la carte reste lisible sans le flou.
