Glow Pulse
Halo indigo-violet qui pulse en continu autour d'une carte — 100 % CSS, sans JavaScript, pour mettre un élément clé en lumière sur fond sombre.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 43 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'animation repose sur un seul @keyframes glowPulse qui oscille la propriété box-shadow entre deux états : au repos (0 % et 100 %), un halo discret de 20 px en rgba(99, 102, 241, .2) ; au pic (50 %), deux couches superposées — un halo intérieur de 40 px en rgba(99, 102, 241, .4) et un anneau de diffusion externe de 60 px en rgba(139, 92, 246, .2). Le timing ease-in-out crée une respiration organique sans à-coup.
La classe .card-glow associe l'animation à une durée fixe de 2 secondes, en boucle infinie. Un liseré border: 1px solid rgba(99, 102, 241, .3) souligne le contour de la carte et ancre la teinte indigo au repos comme en mouvement. Les deux couleurs — indigo #6366f1 (composante principale) et violet #8b5cf6 (anneau de diffusion) — forment une palette cool cohérente reconnaissable dans les interfaces tech premium.
Deux variables CSS exposées sur :root permettent la personnalisation sans toucher à l'animation : --bg-card contrôle le fond de la carte (défaut : #12121a) et --radius-xl son rayon de coin (défaut : 1rem). L'effet est intégralement CSS — aucun JavaScript n'est impliqué, aucun runtime ne tourne en arrière-plan.
Accessibilité
- prefers-reduced-motion absent du code — l'animation pulse tourne en boucle sans condition, y compris quand l'OS demande la réduction de mouvement. Correctif recommandé : ajouter
@media (prefers-reduced-motion: reduce) { .card-glow { animation: none; } }. - Contraste texte WCAG AA : blanc (
#ffffff) sur fond quasi-noir (#12121a), ratio ≥ 15:1 — largement conforme. - La carte
.card-demoest un<div>aveccursor: pointermais sansrole="button"nitabindex="0"— non focusable au clavier si elle est rendue interactive. - Aucun attribut
aria-hiddennirolen'est présent dans la structure de base ; à ajouter si l'effet est purement décoratif dans un contexte sémantique existant. - L'effet attire l'attention par variation de luminosité (pas uniquement par couleur), ce qui le rend perceptible pour les personnes daltoniennes.
Compatibilité navigateur
Repose sur CSS Animations et box-shadow — supportés dans tous les navigateurs modernes depuis 2012. Zéro dépendance JavaScript.
Sans support CSS Animations (IE 10 et antérieurs), la carte s'affiche avec son fond sombre et son liseré indigo sans pulsation — aucune erreur JS, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<!-- Wrapper centré fourni par l'effet -->
<!-- card-demo : fond, dimensions, rayon -->
<!-- card-glow : halo pulsé (border + animation) -->
<div class="card-demo card-glow">
Votre contenu
</div>
<!-- card-glow peut aussi s'appliquer directement -->
<!-- à vos propres éléments (div, section, article…) -->
</div>Le code complet HTML + CSS + JS de Glow Pulse, 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 |
|---|---|---|
| --bg-card | #12121a | Couleur de fond de la carte (variable CSS :root). Remplacez par votre couleur dark brand ou par transparent pour un fond hérité. |
| --radius-xl | 1rem | Rayon des coins (variable CSS :root). 0 pour un rectangle strict, 50 % sur un carré pour un cercle. |
| animation-duration sur .card-glow | 2s | Rythme du pulse. 1,2 s = alerting vif, 3 s = respiration lente et apaisante. |
| Couleur principale dans @keyframes glowPulse | rgba(99, 102, 241, ...) | Teinte indigo des halos intérieur et extérieur. Remplacez les valeurs RVB pour votre palette (vert, cyan, ambre…). |
| Anneau externe 50% : rgba(139, 92, 246, .2) 0 0 60px | violet diffus | Deuxième couche de diffusion à mi-animation. Supprimez-la pour un halo mono-couleur, ou intensifiez (.4) pour un glow plus dramatique. |
| Opacité repos / pic dans @keyframes | .2 → .4 | Contraste de la pulsation. Montez le pic à .7 pour un glow intense, baissez le repos à .05 pour une présence très discrète. |
| Portée du halo dans @keyframes (50%) | 0 0 40px / 0 0 60px | Distance de diffusion lumineuse. 0 0 80px pour un halo large et aérien, 0 0 16px pour un contour lumineux serré. |
FAQ
@keyframes glowPulse et la propriété animation sur .card-glow. Copiez le CSS, ajoutez la classe à votre élément et c'est prêt. Compatible React, Vue, Angular, Svelte : aucun runtime JS n'entre en jeu, la classe peut s'appliquer à n'importe quel élément HTML.rgba() directement dans @keyframes glowPulse et sur la propriété border de .card-glow. Exemple pour un halo émeraude : remplacez rgba(99, 102, 241, ...) par rgba(16, 185, 129, ...) et rgba(139, 92, 246, ...) par rgba(5, 150, 105, ...). Il n'existe pas de variable CSS dédiée à la couleur dans la version de base — la modification directe des keyframes est volontaire pour garder le code minimal.infinite par 1 dans la propriété animation de .card-glow — l'animation s'exécute une fois et s'arrête. Pour re-déclencher sur un événement (clic, validation de formulaire…), retirez la classe card-glow de l'élément, forcez un reflow via element.getBoundingClientRect(), puis réajoutez-la — le navigateur relance l'animation depuis le début.
