Ambient Light Glow
Halo ambiant en 4 couches de box-shadow concentriques animées en CSS pur — respiration lente, zéro JavaScript, 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. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet empile 4 valeurs de box-shadow séparées par des virgules sur un seul élément. Chaque couche définit la même position (offset 0/0) avec un blur-radius croissant — 30, 60, 100 et 150 px — et un alpha décroissant : la lumière est intense au contact de l'élément, puis se dissout dans l'espace. Il n'y a aucun spread-radius : c'est uniquement le flou qui diffuse la lumière, sans agrandir la forme source.
L'animation @keyframes ambientGlow oscille entre deux états : aux keyframes 0 %/100 % (repos) les blurs sont à 30/60/100/150 px avec des alphas de 0,5/0,3/0,2/0,1 ; au keyframe 50 % (pic) ils passent à 40/80/120/200 px avec des alphas de 0,7/0,5/0,35/0,2. Le moteur CSS interpole automatiquement chaque valeur numérique, et la courbe ease-in-out sur un cycle de 3 s donne à l'animation sa forme de respiration organique.
La teinte indigo/violette est cohérente entre le background: linear-gradient(135deg, #6366f1, #8b5cf6) de l'élément et les RGBA des couches de box-shadow — rgb(99,102,241) correspond à #6366f1 et rgb(139,92,246) à #8b5cf6. Ce couplage fait percevoir le halo comme de la lumière émise par l'élément lui-même plutôt qu'un artefact CSS.
Il n'y a aucun JavaScript dans cet effet : aucun requestAnimationFrame, aucun canvas, aucune manipulation du DOM. Toute la personnalisation passe par la surcharge CSS de la classe .ambient-glow-box et de la règle @keyframes ambientGlow.
Accessibilité
- prefers-reduced-motion absent du code. La feuille de styles actuelle ne contient aucune
@media (prefers-reduced-motion: reduce). En production, ajouter.ambient-glow-box { animation: none; }dans ce media query pour stopper l'animation chez les utilisateurs sensibles au mouvement. - Contraste texte : le label blanc (
#fff) sur le dégradé#6366f1→#8b5cf6donne un ratio de contraste ≈ 4,8:1 — conforme WCAG AA (seuil 4,5:1). .ambient-glow-boxest une<div>sans rôle ARIA. Si elle contient du contenu fonctionnel (pas seulement décoratif), ajouterrole="img"ourole="region"et unaria-labeldescriptif.- L'élément n'est pas interactif par défaut : aucun gestionnaire d'événement, aucun piège clavier. L'ordre de tabulation n'est pas modifié.
- Aucun JS ne s'exécute : les outils d'accessibilité basés sur l'inspection du DOM (NVDA, VoiceOver) ne sont pas perturbés.
Compatibilité navigateur
Repose sur box-shadow multi-couches et @keyframes animation — supportés dans tous les navigateurs modernes. Zéro dépendance.
Si <code>@keyframes</code> et <code>animation</code> ne sont pas supportés (IE 8), l'élément s'affiche avec son dégradé de fond et ses dimensions — aucune erreur JS, le halo reste absent mais le contenu reste lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<!-- Effet : Ambient Light Glow -->
<div class="demo-preview">
<div class="ambient-glow-box">
Votre contenu
</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 |
|---|---|---|
| blur-radius des couches — @keyframes ambientGlow état 0%/100% | 30px / 60px / 100px / 150px | Portée du halo au repos. Réduire à 20/40/60/100 px pour un halo serré ; augmenter à 40/80/140/220 px pour un effet immersif sur fond très sombre. |
| blur-radius des couches — @keyframes ambientGlow état 50% | 40px / 80px / 120px / 200px | Portée maximale du halo au pic de la respiration. La couche 4 à 200 px déborde largement — acceptable sur fond noir, à réduire si l'élément est entouré d'autres composants. |
| alpha RGBA — @keyframes ambientGlow état 0%/100% | 0,5 / 0,3 / 0,2 / 0,1 | Intensité au repos. Monter à 0,7/0,5/0,3/0,15 pour un halo soutenu ; descendre à 0,2/0,1/0,06/0,03 pour un effet très subtil en arrière-plan. |
| animation-duration — .ambient-glow-box | 3s | Période d'une respiration complète. 1,5 s = urgence / alerte ; 5–8 s = quiétude / ambiance. |
| animation-timing-function — .ambient-glow-box | ease-in-out | Courbe de la transition. linear = battement mécanique, régulier. ease-in-out (défaut) = accélération et décélération qui imitent une respiration organique. |
| background — .ambient-glow-box | linear-gradient(135deg, #6366f1, #8b5cf6) | Couleur de fond de l'élément source. Remplacer par votre couleur brand. À synchroniser avec les RGBA des couches de box-shadow pour maintenir la cohérence chromatique. |
| couleurs RGBA dans @keyframes ambientGlow | rgb(99,102,241) = #6366f1 et rgb(139,92,246) = #8b5cf6 | Teinte de chaque couche de halo. Pour une palette brand différente, remplacer les deux triplets RGB en cohérence avec le background de l'élément. Un seul triplet répété sur les 4 couches donne un halo monochrome uniforme. |
FAQ
.ambient-glow-box fonctionne sur n'importe quel bloc (div, button, a, section…) du moment qu'il est positionné (position: relative ou absolute) et qu'il a une taille définie. Sur un button, penser à retirer les styles navigateur par défaut et à vérifier que le box-shadow de focus clavier n'entre pas en collision avec les couches de l'effet.background de .ambient-glow-box (gradient ou couleur unie) et les valeurs RGBA dans @keyframes ambientGlow. Le triplet RGB doit correspondre à votre couleur — par exemple pour un vert #22c55e : rgba(34, 197, 94, .5). Modifier uniquement l'un des deux brise la cohérence lumineuse et rend le halo perceptible comme artifice.box-shadow déclenche un repaint (pas un reflow, car elle n'affecte pas le flux du document si l'élément est positionné). Sur les navigateurs modernes le coût est faible sur des éléments isolés. Pour des listes longues ou des animations simultanées nombreuses, préférer filter: drop-shadow() qui peut être composited, ou limiter l'animation aux éléments visibles avec un IntersectionObserver.
