Iridescent Glass Panel
Un panneau de verre dépoli de 220 × 150 px traversé de reflets arc-en-ciel : un dégradé conique magenta-cyan-bleu-ambre, fondu en mode screen, dont le centre se place sous le pointeur et l'angle tourne avec lui — comme un film de bulle de savon qui change quand on bouge, à la souris comme au doigt.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le panneau .lg-iridescent est une vitre : fond blanc à 5 %, backdrop-filter: blur(14px) (avec -webkit-), bordure blanche à 15 %, coins de 16 px, overflow: hidden, curseur en croix. Dedans, deux calques en position: absolute; inset: 0 qui laissent passer le pointeur. .lg-iridescent-layer porte un conic-gradient(from var(--iri-angle) at var(--iri-x) var(--iri-y), …) qui fait le tour du cercle chromatique — magenta, cyan, bleu, ambre, retour au magenta, chacun à 25 % — en mix-blend-mode: screen et à 70 % d'opacité (100 % au survol, en 0,3 s). .lg-iridescent-shine ajoute une tache blanche à 20 % centrée au même point. Le texte (12,8 px, graisse 600, blanc ombré) est au-dessus.
Le script écoute pointermove sur chaque [data-iridescent] et y écrit trois variables : --iri-x et --iri-y, la position du pointeur en pourcentage du panneau, et --iri-angle, l'angle entre le centre du panneau et le pointeur (Math.atan2, en degrés). Le centre du dégradé suit donc le doigt et la roue de couleurs tourne quand on fait le tour du panneau. --iri-angle est déclarée par @property comme un <angle>. Mesuré, pointeur à 20 px du coin bas-droit d'un panneau de 220 × 150 : calque à conic-gradient(from 31.4296deg at 90.9091% 86.6667%, …), identique dans Chromium 151 et Firefox 153.
Trois détails du code font tourner la roue partout. La déclaration @property --iri-angle dit inherits: true : le script écrit l'angle sur le panneau, et c'est le calque, son enfant, qui l'utilise ; avec false, le calque garderait 0° — mesuré, 31,43° sur le panneau contre 0° sur le calque, et un dégradé sans « from » où seul le centre bouge. L'écouteur est pointermove, avec touch-action: none sur le panneau : mesuré dans Chromium en tactile, un doigt qui glisse fait tourner la roue (29,5°, centre à 64 % × 61 %). Enfin le panneau est posé dans un décor .lg-iridescent-backdrop (disques nets, hachures), parce qu'un verre sur un fond uni n'a rien à flouter ; remplacez-le par votre image.
Accessibilité
- Ornement : les reflets n'apportent aucune information ; un lecteur d'écran lit seulement le texte du panneau. Si le panneau sert de preuve visuelle (hologramme de billet), donnez aussi la preuve en texte — nom, numéro, statut « valide » — lisible sans bouger le doigt.
- Contraste du texte : il varie avec la position du reflet, puisque la couleur sous le texte change. Le texte blanc ombré d'origine tient sur un panneau posé sur fond sombre ; sur un fond clair, passez-le en couleur foncée (c'est le cas du billet et du cadran de cette page) et vérifiez le contraste au pire endroit, quand la tache blanche du reflet passe dessous.
- Mouvement : rien ne bouge seul ; les reflets ne se déplacent qu'avec le pointeur, à la demande. Aucune règle
prefers-reduced-motionn'est nécessaire. Le passage de 70 % à 100 % d'opacité au survol dure 0,3 s. - Au doigt :
touch-action: noneempêche la page de défiler quand le doigt commence sur le panneau. Sur un panneau de 220 × 150 px ce n'est pas gênant ; si vous l'agrandissez à toute la largeur d'un téléphone, laissez de la place autour pour faire défiler. - Clavier : pas d'interaction au clavier, et aucune n'est nécessaire tant que le panneau est décoratif.
Compatibilité navigateur
CSS : conic-gradient avec position et angle en variables, mix-blend-mode: screen, @property, backdrop-filter (et -webkit-), touch-action. JS : pointermove, style.setProperty. Zéro dépendance. Mesuré dans Chromium 151 et Firefox 153 : même dégradé, même angle (31,4296°), aucune erreur ; au doigt dans Chromium en mobile émulé. Les navigateurs sans @property traitent --iri-angle comme une variable ordinaire, qui s'hérite : l'effet y marche aussi.
Sans conic-gradient (Firefox avant 83, Safari avant 12.1), le calque n'a pas de fond : il reste la vitre et la tache blanche qui suit le pointeur. Sans backdrop-filter, le panneau est translucide sans flou. Sans événements pointeur (Safari avant 13), les reflets restent figés au centre.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="lg-iridescent-backdrop">
<div class="lg-iridescent" data-iridescent="">
<div class="lg-iridescent-layer"></div>
<div class="lg-iridescent-shine"></div>
<span class="lg-iridescent-text">…</span>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Iridescent Glass Panel, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleurs et intensité des reflets (CSS — .lg-iridescent-layer, conic-gradient(…)) |
magenta, cyan, bleu, ambre, magenta, à 25 % ; mix-blend-mode: screen ; opacité 0,7 puis 1 au survol |
Sur fond clair, montez à 40-50 % et passez en mix-blend-mode: overlay, sinon le screen blanchit tout. Pour une nacre discrète, gardez 25 % et ajoutez des teintes pastel ; pour un hologramme franc, des couleurs saturées. Laissez la dernière couleur égale à la première pour éviter une cassure. |
Rotation avec le pointeur (JS — --iri-angle ; CSS — @property --iri-angle) |
angle entre le centre et le pointeur, hérité par le calque | Multipliez l'angle (l * 2) pour une roue qui tourne deux fois plus vite. Gardez inherits: true dans la déclaration : avec false, le calque ne reçoit jamais l'angle et la roue ne tourne plus. |
Reflet blanc (CSS — .lg-iridescent-shine) |
blanc à 20 % → transparent à 50 % du rayon | Montez à 35 % pour un éclat de lumière franc sous le doigt, ou supprimez le calque pour ne garder que les couleurs. |
Verre (CSS — .lg-iridescent : backdrop-filter: blur(14px), fond blanc 5 %) |
flou 14 px | 5 px garde lisible ce qui est derrière (une image de couverture) ; 20 px ne laisse que des couleurs. Le panneau peut prendre n'importe quelle forme : border-radius: 50% pour un cadran, une pastille de 120 px pour un sceau. |
Décor derrière le verre (CSS — .lg-iridescent-backdrop) |
trois disques nets, hachures, fond nuit | Il sert à rendre le flou visible dans la démo ; supprimez-le et posez le panneau sur votre image. |
FAQ
--iri-x, --iri-y), non déclarée, s'hérite comme toute variable CSS, mais un angle déclaré avec inherits: false s'arrêterait au panneau — le calque garderait sa valeur initiale, 0°, et seule la position du centre bougerait. Mesuré avec false : 31,43° sur le panneau, 0° sur le calque. Avec inherits: true, le calque reçoit l'angle. Curiosité : dans un navigateur sans @property, la variable n'est pas déclarée, donc héritée, et la roue tourne dans tous les cas.touch-action: none évite que la page défile pendant le geste. Il n'utilise pas l'inclinaison du téléphone : pour un hologramme qui bouge quand on penche l'appareil, il faudrait écrire les mêmes variables depuis l'événement deviceorientation, avec la demande d'autorisation qu'exige Safari iOS.
