Northern Lights
Trois nappes CSS en dégradé animées par `auroraFlow` (ondulation + skew) et `auroraHue` (rotation de teinte 360°) — pur 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. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur trois .aurora-layer en position: absolute, chacun mesurant width: 200%; left: -50% — le surlargeur permet des translations de ±10 % sans découvrir les bords de la scène. Chaque couche porte un linear-gradient vertical de vert–bleu–violet en rgba très basse opacité (0,06–0,12), suivi d'un filter: blur() de 25 à 40 px qui fond les bandes en un halo lumineux doux.
Deux @keyframes pilotent chaque couche simultanément. auroraFlow combine translateX (−10 % ↔ +5 %), skewX (−5° ↔ +3°) et scaleY (0,8 ↔ 1,2) avec un easing ease-in-out : la nappe glisse latéralement, se déforme et « respire » en hauteur. auroraHue applique hue-rotate(0deg → 360deg) sur le même filtre blur, en timing linear, pour faire pivoter toutes les teintes en continu — les verts deviennent cyan, puis bleus, puis violets, puis verts à nouveau.
Les trois couches ne sont pas synchrones : leurs durées diffèrent (6 s / 8 s / 10 s pour auroraFlow ; 10 s / 12 s / 15 s pour auroraHue) et la couche intermédiaire tourne en animation-direction: reverse pour auroraFlow — elle dérive en sens opposé, créant des interférences de phase qui imitent l'imprévisibilité d'une vraie aurore. La troisième couche inverse également auroraHue, décalant son cycle de teinte indépendamment.
Les étoiles sont six points blancs tracés par radial-gradient(1px 1px at …) sur un seul .aurora-stars à opacity: 0,6 — aucun DOM supplémentaire, aucun canvas. L'effet est 100 % CSS sans requestAnimationFrame ni JS : le navigateur délègue toutes les animations au compositing GPU via les propriétés transform et filter.
Accessibilité
- prefers-reduced-motion : absent du code. Aucune règle
@media (prefers-reduced-motion: reduce)n'est présente — les animations tournent même si l'OS signale une préférence de réduction. À ajouter manuellement :@media (prefers-reduced-motion: reduce) { .aurora-layer { animation: none } }. - Le conteneur
.aurora-containerest purement décoratif mais ne porte pasaria-hidden="true"— à ajouter dans votre intégration si aucun texte descriptif n'accompagne la scène. - Le
.aurora-labeltextuel est dans le flux DOM normal et lisible par les lecteurs d'écran ; aucun attributroleniaria-labeln'est défini sur la scène elle-même. - Contraste du label :
rgba(255,255,255,0.8)sur fond#0a0a1e→ ratio ≈ 12:1, nettement au-dessus du seuil WCAG AA (4,5:1). Letext-shadowvert ne dégrade pas la lisibilité. - Aucun élément focusable n'est introduit par l'effet — il est purement décoratif et n'exige aucune interaction clavier.
Compatibilité navigateur
Nécessite CSS animations, filter: blur() et hue-rotate() — supportés dans tous les navigateurs modernes depuis 2016.
Sans support de <code>filter</code> (IE 11 et antérieurs), les nappes s'affichent comme des rectangles colorés nets sans flou — l'ambiance sombre reste présente, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="aurora-container" aria-hidden="true">
<div class="aurora-stars"></div>
<div class="aurora-layer"></div><!-- nappe 1 : 8s auroraFlow / 12s auroraHue -->
<div class="aurora-layer"></div><!-- nappe 2 : 10s reverse / 15s normal -->
<div class="aurora-layer"></div><!-- nappe 3 : 6s normal / 10s reverse -->
</div>
<!-- Contenu overlay facultatif : texte, CTA… -->
<span class="aurora-label">Aurora Borealis</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 |
|---|---|---|
| rgba dans linear-gradient (couleurs des nappes) | vert rgba(0,255,128,.08–.10), cyan rgba(0,200,255,.12), violet rgba(100,0,255,.08–.10) | Modifiez les rgba dans les background de chaque .aurora-layer — chaque couche peut avoir des teintes indépendantes. Thème rose-violet : remplacez le vert par rgba(255,0,128,0.10). |
| filter: blur() par couche | 30 px / 40 px / 25 px | Augmentez jusqu'à 60 px pour un halo ultra-diffus ; descendez à 12 px pour des formes de gradient plus nettes. Valeurs dans .aurora-layer (défaut), :nth-child(2) et :nth-child(3). |
| Durée auroraFlow | 8 s (couche 1) / 10 s (couche 2, reverse) / 6 s (couche 3) | Les durées échelonnées créent le déphasage imitant l'imprévisibilité de l'aurore. Multipliez uniformément (×2 = contemplatif, ×0,5 = agité). Ne synchronisez pas les 3 couches — cela supprime l'effet d'interférence. |
| Durée auroraHue | 12 s (couche 1) / 15 s (couche 2) / 10 s (couche 3, reverse) | Contrôle la vitesse de rotation des teintes. 30 s+ = cycle quasi imperceptible ; 5 s = changement de couleur rapide et hypnotique. Différenciez les durées entre couches pour des cycles indépendants. |
| .aurora-stars opacity | 0.6 | 0 = ciel pur sans étoiles ; 1 = étoiles très visibles. Modifiez aussi les positions at 10% 20%, 30% 70%… dans les radial-gradient pour personnaliser le semis. |
| height des .aurora-layer | 60 % / 50 % / 40 % | Augmentez pour un rideau d'aurore plus épais couvrant toute la scène ; réduisez à 20–30 % pour une fine bande lumineuse à l'horizon. |
| .aurora-container background | #0a0a1e | Doit rester sombre pour que les dégradés semi-transparents soient visibles. #050510 pour un bleu nuit plus profond ; #0f0a05 pour une ambiance brune désertique nocturne. |
FAQ
requestAnimationFrame. Les animations sont déclaratives et déléguées au compositing GPU du navigateur. Intégrable partout : HTML statique, Angular, React, Vue, Svelte — copiez le CSS et les trois .aurora-layer.rgba() des linear-gradient de chaque .aurora-layer. Cyberpunk : remplacez le vert et le violet par rgba(57,255,20,.10) et rgba(204,0,255,.10). Hivernal : conservez les bleus, supprimez les verts, ajoutez du bleu-blanc rgba(200,240,255,.08). Aucun outil de build requis.@media (prefers-reduced-motion) n'est présente. Pour l'ajouter : @media (prefers-reduced-motion: reduce) { .aurora-layer, .aurora-stars { animation: none } }. L'effet restera visible comme un fond coloré flou statique — aucune animation ne tournera.
