Gradient Spotlight
Un masque CSS radial suit le curseur et révèle une palette oklch vibrante sous une surface muette — rendu GPU, zéro canvas, zéro dépendance.
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 superpose deux calques dans .spotlight-container : .spotlight-muted est un fond dégradé gris foncé visible à l'état de repos, et .spotlight-vibrant est un fond multicolore positionné en absolute inset:0 par-dessus. Le calque vibrant est invisible à l'état de repos — son mask-image le restreint à un disque centré dont le rayon est nul par défaut, repoussé hors de la zone visible à 50 %, 50 %.
JavaScript écoute mousemove sur chaque conteneur [data-spotlight] et calcule la position relative du pointeur en pourcentage ((clientX - rect.left) / width * 100, idem pour Y). Ces valeurs sont injectées dans les propriétés CSS personnalisées --mx et --my directement sur l'élément. La règle mask-image: radial-gradient(circle 80px at var(--mx, 50%) var(--my, 50%), black 30%, transparent 100%) révèle alors le calque vibrant sur un rayon de 80 px autour du curseur — le masque black rend opaque, transparent masque. Au mouseleave, les propriétés reviennent à 50 % pour recentrer le disque.
Le dégradé linear-gradient(135deg, oklch(.7 .3 30), oklch(.6 .28 150), oklch(.65 .32 280), oklch(.7 .25 60)) exploite l'espace colorimétrique oklch (luminosité perceptuellement uniforme). Contrairement au HSL, où le jaune est nettement plus clair que le bleu à même lightness, oklch maintient une luminance perçue constante quelle que soit la teinte H — le dégradé révélé est équilibré sans plateau terne ni pic saturé.
Le rendu est entièrement composité GPU : mask-image déclenche la promotion du calque en couche composée. Le navigateur met à jour uniquement deux propriétés CSS à chaque mousemove — aucun requestAnimationFrame, aucune lecture de pixels, aucun canvas. La propriété transition: background .3s sur .spotlight-muted laisse la porte ouverte à un changement de fond muet animé.
Accessibilité
- prefers-reduced-motion absent : le code ne consulte pas cette media query. L'effet suit le curseur en continu sans garde de mouvement réduit — à ajouter manuellement si vous ciblez des utilisateurs sensibles au mouvement.
cursor: nonemasque le curseur natif dans la zone de l'effet. Ce choix peut désorienter les utilisateurs de claviers ou de technologies d'assistance qui déplacent le pointeur. Supprimez cette règle si l'accessibilité est prioritaire.- Le
.spotlight-labellivré en démo utilisecolor: rgba(255,255,255,.5)sur fond gris foncé — ratio de contraste ≈ 2,5:1, en dessous du seuil WCAG AA (4,5:1). Passez àcolor: #e2e8f0pour respecter le niveau AA. - Aucun
aria-labelnirole="img"n'est présent dans le balisage de base. Ajoutez-les si le conteneur constitue un contenu significatif (fond de page, bannière) plutôt qu'une pure décoration. - Sur écran tactile, le spot reste centré (50 %, 50 %) par défaut — pas d'interaction au doigt. Ajoutez un écouteur
touchmovesymétrique aumousemovepour couvrir les appareils mobiles.
Compatibilité navigateur
Requiert mask-image CSS, oklch et les propriétés CSS personnalisées — supportés dans tous les navigateurs modernes depuis 2022–2023. Zéro dépendance externe.
Sur un navigateur sans <code>mask-image</code>, le calque <code>.spotlight-vibrant</code> reste pleinement visible (pas de masque) — la palette vibrante s'affiche en permanence. Sur un navigateur sans oklch, les couleurs du dégradé sont ignorées et le calque est blanc. Dans les deux cas, aucune erreur JS fatale.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="spotlight-container" data-spotlight=""
role="img" aria-label="Fond interactif à révélation colorée — déplacez la souris">
<div class="spotlight-muted">
<!-- Votre contenu (titre, paragraphe, bouton) ici.
Ajoutez position:relative; z-index:1 sur vos éléments
pour qu'ils restent visibles au-dessus du calque vibrant. -->
</div>
<div class="spotlight-vibrant" aria-hidden="true"></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 |
|---|---|---|
| circle 80px | 80px | Rayon du spot dans la règle mask-image de .spotlight-vibrant. Augmentez (120–200 px) pour un halo large, réduisez (40–60 px) pour une torche précise. |
| black 30% | 30% | Position du premier arrêt transparent dans le dégradé du masque. À 0 %, bord totalement progressif (fondu doux) ; à 50 %, disque dur bien défini. |
| background (.spotlight-vibrant) | 4 couleurs oklch | Remplacez le linear-gradient(135deg, oklch(…) …) de .spotlight-vibrant par votre palette brand pour adapter les couleurs révélées à votre charte graphique. |
| background (.spotlight-muted) | #2a2a3a / #1a1a2a | Couleur de la surface muette au repos. Modifiez pour matcher le fond global de votre page (noir pur, brun foncé, indigo…). |
| cursor: none | présent | Présent sur .spotlight-container. Supprimez-le pour conserver le curseur natif — recommandé si accessibilité ou curseur personnalisé sont prioritaires. |
| --mx / --my | 50% / 50% | Propriétés CSS injectées par le JS. Assignez-les manuellement (el.style.setProperty('--mx','30%')) pour positionner le spot depuis le code ou pour animer le spotlight automatiquement sans interaction. |
FAQ
querySelectorAll('[data-spotlight]') et attache un écouteur mousemove indépendant sur chaque conteneur. Ajoutez autant d'éléments data-spotlight que nécessaire — chacun gère son propre spot sans interférence avec les autres.touchmove dans la boucle existante : e.addEventListener('touchmove', function(ev){ var t=ev.touches[0]; var r=e.getBoundingClientRect(); e.style.setProperty('--mx',(((t.clientX-r.left)/r.width)*100).toFixed(1)+'%'); e.style.setProperty('--my',(((t.clientY-r.top)/r.height)*100).toFixed(1)+'%'); }, {passive:true}). Le spot suit alors le doigt sur écran tactile.
