Aurora Effect
Fond aurore boréale en CSS pur — deux pseudo-éléments surdimensionnés portant des dégradés radiaux violet/cyan/rose dérivent lentement sur fond nuit, sans une ligne de 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. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
.bg-aurora-new établit un fond sombre en dégradé 45° (trois tons nuit bleu-indigo) et déclare overflow: hidden pour rogner les débordements. Pas de canvas, pas de JS — l'effet repose entièrement sur des propriétés CSS natives.
::before et ::after sont dimensionnés à 200 % × 200 % du conteneur — cette marge garantit qu'aucun bord du dégradé n'apparaît quelle que soit la position dans l'animation. Chacun porte un fond composé de trois radial-gradient superposés : violet (rgba(120,0,255,.3) ancré à 20 % horizontal), cyan (rgba(0,255,200,.3) à 80 %) et rose (rgba(255,0,150,.2) en bas centré). Ces pôles colorés évoquent les bandes spectrales d'une vraie aurore.
Les deux pseudo-éléments partagent @keyframes auroraNew : départ translate(-10%,-10%) rotate(0deg), arrivée translate(10%,10%) rotate(10deg), sur 15 s ease-in-out infinite alternate. Le sens alternate crée un va-et-vient sans coupure. L'amplitude de ±10 % (en coordonnées propres du pseudo-élément, soit ±20 % de la largeur du conteneur) suffit à faire onduler l'aurora sur toute la surface visible.
Le double empilement des deux couches identiques renforce l'opacité des teintes par composition CSS naturelle : les zones où les dégradés coïncident paraissent plus profondes et lumineuses, imitant la densité variable d'une vraie aurore sans calcul pixel par pixel.
Accessibilité
- prefers-reduced-motion absent : le code ne contient aucune règle
@media (prefers-reduced-motion: reduce)— l'animation tourne toujours, même chez les utilisateurs qui l'ont désactivée au niveau OS. Ajoutez manuellement@media (prefers-reduced-motion: reduce) { .bg-aurora-new::before, .bg-aurora-new::after { animation: none; } }si votre contexte l'exige. - Effet purement décoratif : ajoutez
aria-hidden="true"sur.bg-aurora-newsi aucun contenu fonctionnel ne s'y trouve — les lecteurs d'écran n'ont rien à lire sur un fond CSS. - Si vous superposez du texte, celui-ci reste dans le DOM et est lu normalement par les technologies d'assistance, indépendamment du fond animé.
- Contraste texte : blanc (
#fff) sur fond aurora sombre (luminosité ~6 %) — ratio > 7:1, conforme WCAG AA et AAA. - Aucune interaction clavier ni zone de focus à gérer — l'effet n'expose ni bouton ni zone cliquable propres.
Compatibilité navigateur
Utilise uniquement des pseudo-éléments CSS, des radial-gradient et des keyframes — disponibles dans tous les navigateurs modernes depuis 2015.
Sans animations CSS (navigateur ancien ou <code>animation: none</code> forcé), le dégradé de fond sombre reste visible — aucune erreur JS, aucun layout cassé.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-aurora-new" aria-hidden="true">
<!-- ::before et ::after générés par le CSS -->
<!-- Overlay facultatif : placez ici votre texte ou composant -->
<div style="position:relative;z-index:1">
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 |
|---|---|---|
| Couleurs aurora (rgba dans ::before/::after) | violet rgba(120,0,255,.3), cyan rgba(0,255,200,.3), rose rgba(255,0,150,.2) | Remplacez les trois couleurs des radial-gradient pour changer la palette — ex. bleu/vert pour une atmosphère nordique, orange/rose pour une version chaude. |
| animation-duration (15s) | 15s | Raccourcir à 6–8s pour une aurora plus dynamique ; allonger à 25–30s pour un fond ultra-contemplatif. |
| Amplitude translate (±10%) | translate(-10%,-10%) → translate(10%,10%) | Augmenter à ±20 % pour une oscillation plus ample visible sur les grands écrans ; réduire à ±5 % pour une vibration quasi-statique. |
| Amplitude rotate (0–10deg) | 0deg → 10deg | Passer à 0–20deg pour une rotation plus dramatique, ou à 0deg pour supprimer la torsion et garder un drift purement linéaire. |
| Fond de base (background sur .bg-aurora-new) | linear-gradient(45deg, #0a0a1a, #1a0a2a, #0a1a2a) | Modifier les trois tons hex pour décaler la base vers le bleu marine, le rouge nuit ou un noir pur — la palette aurora s'en trouvera rehaussée ou assombrie. |
| Opacité alpha des gradients | 0.3 (violet/cyan), 0.2 (rose) | Augmenter à 0.5–0.6 pour une aurora nettement plus lumineuse ; descendre à 0.1 pour un effet très subtil, quasi-fantomatique. |
FAQ
radial-gradient et une @keyframes. Il n'y a aucun JS à charger, aucune dépendance npm, aucun événement à câbler. Copiez le HTML et le CSS, et l'aurora tourne immédiatement dans n'importe quelle page ou framework..bg-aurora-new::before, .bg-aurora-new::after, remplacez les valeurs rgba(…) dans les trois radial-gradient. Le premier contrôle la teinte gauche, le deuxième la teinte droite, le troisième la base basse. Le quatrième paramètre (alpha, ex. .3) règle l'intensité de chaque bande..bg-aurora-new avec position: relative; z-index: 1. Pour assurer la lisibilité, ajoutez un text-shadow sombre ou un scrim semi-transparent (background: rgba(0,0,0,.45) en position: absolute; inset: 0 avant votre contenu).
