Aurora Borealis
Fond aurore boréale pur CSS — deux bandes lumineuses indigo-violet-cyan animées en opposition de phase simulent les rideaux ondulants de la lumière polaire.
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 repose sur deux pseudo-éléments ::before et ::after attachés à .bg-aurora, chacun dimensionné à 150 % × 150 % du conteneur et positionné à top: −50 % pour déborder hors du cadre. Le parent applique overflow: hidden — seule la zone utile est visible, les bords animés restent toujours hors champ.
Chaque pseudo-élément est rempli d'un dégradé linéaire transparent → #6366f1 (indigo) → #8b5cf6 (violet) → #06b6d4 (cyan) → transparent, avec opacity: 0.3 et filter: blur(60px). Le flou extrême transforme les bandes de couleur en un halo diffus qui évoque naturellement les rideaux lumineux de l'aurore.
Les deux couches partagent la même animation @keyframes aurora (10 s, ease-in-out, infinite) : rotate(−5deg) à rotate(5deg) combiné à un translateY(−20px) au mi-cycle. L'animation-delay: −5s sur ::after les met en opposition de phase — elles se balancent en sens contraire, créant le mouvement organique des aurores sans aucun JavaScript.
Une variante .bg-aurora-new remplace le dégradé linéaire par trois dégradés radiaux superposés (violet · cyan · rose) animés par @keyframes auroraNew (15 s, alternate) : le résultat est plus diffus et centré, mieux adapté aux conteneurs larges de type plein écran.
Accessibilité
- prefers-reduced-motion absent : aucun bloc
@media (prefers-reduced-motion: reduce)n'est inclus dans le code — les animations tournent même si l'OS demande de les réduire. Ajoutez manuellement.bg-aurora::before, .bg-aurora::after { animation: none; }dans ce media query. - Le conteneur
.bg-aurorade base ne porte aucun attribut ARIA. Ajoutezrole="img"etaria-label="Arrière-plan aurore boréale animé"pour les lecteurs d'écran. - Aucune interaction clavier générée par l'effet (pur CSS, zéro JS) — le flux de tabulation de la page n'est pas perturbé.
- L'effet opère en arrière-plan à
opacity: 0.3sur fond#0a0a0f— il n'affecte pas le contraste du texte overlay. Vérifiez le ratio de contraste de votre texte sur cette couleur de fond (WCAG AA ≥ 4,5:1). - Pas de
<canvas>ni de contenu injecté dynamiquement — les lecteurs d'écran voient uniquement le contenu textuel HTML statique de vos éléments enfants.
Compatibilité navigateur
Repose sur filter: blur() et les animations CSS — disponibles dans tous les navigateurs modernes. Zéro dépendance JavaScript.
Sans support des animations CSS ou de <code>filter: blur()</code>, le fond reste uni <code>#0a0a0f</code> — l'aurore n'apparaît pas mais la page reste fonctionnelle et lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-aurora" role="img" aria-label="Arrière-plan aurore boréale animé">
<!-- Contenu overlay : texte, titres, boutons -->
<!-- Positionnez vos éléments en position: relative; z-index: 1 -->
</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 |
|---|---|---|
| Couleurs du dégradé (linear-gradient) | #6366f1 → #8b5cf6 → #06b6d4 | Modifiez les trois hex dans le sélecteur .bg-aurora::before, .bg-aurora::after. Ex. : vert #10b981 → turquoise #14b8a6 → cyan #06b6d4 pour une aurore froide. |
| opacity (::before / ::after) | 0.3 | Intensité globale du halo. 0,15 = très discret (usage en fond clair), 0,5 = intense (plein écran nocturne). |
| filter: blur() (::before / ::after) | 60px | Rayon de flou. 80–100 px = plus diffus et nébuleux, 30 px = bandes plus définies et graphiques. |
| animation-duration (propriété animation) | 10s | Vitesse du mouvement. 6 s = dynamique, 18 s = contemplatif. Appliquez la même valeur sur ::before et ::after pour conserver la synchronisation. |
| animation-delay (::after) | −5s (soit −T/2) | Déphasage entre les deux couches. −T/2 = mouvement opposé (défaut fluide). 0 s = synchrone, T/4 = décalage intermédiaire. |
| rotate() dans @keyframes aurora | rotate(−5deg) → rotate(5deg) | Amplitude de la rotation oscillatoire. ±10° = plus agité, ±2° = quasi-statique. |
| .bg-aurora-new (variante) | classe alternative | Remplacez .bg-aurora par .bg-aurora-new pour la variante à dégradés radiaux (violet · cyan · rose), animation 15 s en mode alternate — plus diffuse et centrée. |
FAQ
@keyframes. Il fonctionne même avec JavaScript désactivé ou dans un contexte Content-Security-Policy strict sur les scripts..bg-aurora se retrouve naturellement au-dessus des pseudo-éléments. Ajoutez position: relative; z-index: 1 si nécessaire, et un text-shadow ou un léger scrim (background: linear-gradient(transparent, rgba(10,10,15,.6))) pour garantir la lisibilité du texte.indigo-500 / violet-500 / cyan-500 pour une intégration directe dans les design systems contemporains.
