Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
BackgroundsGratuit

Aurora Mesh

Cinq nappes de dégradés radiaux floutés sur deux pseudo-éléments CSS, deux animations décalées : une aurore boréale verte, cyan et violette en fond de page — zéro JavaScript.

CSSAnimationOrganic
AURORA
Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Backgrounds en contient 50 au total, dont 6 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

Exemples d'usage

La plateforme créative

Construisez l'avenir de votre produit

Concevez, prototypez et livrez plus vite avec un workflow assisté par IA.

① Hero plein écran — Landing page dark SaaS

QuandLa section hero d'une landing page en thème sombre présente un produit tech, une app ou une offre cloud sur toute la hauteur du viewport.
PourquoiL'aurora couvre une grande surface et les nappes lumineuses ondulent en arrière-plan sans écraser le texte. La palette vert/cyan/violet évoque l'innovation technologique sans sur-accessoriser.
RéglagesÉtirer .aurora-mesh à width: 100%; height: 100vh; border-radius: 0. Superposer titre et CTA dans un div en absolu. Augmenter filter: blur() à 45px / 40px et inset à -30% pour les grands formats.
Sommeil profond — Session en cours
32:14
Respirez doucement…

② Application de relaxation — Fond plein écran ambiance nocturne

QuandUne application de bien-être ou de sommeil (style Endel, Calm) affiche un fond animé en plein écran lors des sessions de méditation ou d'endormissement guidé.
PourquoiLes nappes vert-cyan-violet créent une atmosphère nocturne froide et apaisante sur toute la surface ; la grande zone laisse les ondulations exister pleinement — les cinq dégradés radiaux se lisent sur un fond plein mais se perdent dans une carte de taille réduite.
Réglageswidth: 100%; height: 100vh; border-radius: 0 sur .aurora-mesh en position: absolute; inset: 0. Rallongez les durées à 14s / 18s pour un ondoiement ultra-lent adapté à la méditation. Augmentez filter: blur() à 50px / 45px pour un fondu très doux. Réduisez les opacités rgba de 15–20 % pour une atmosphère encore plus tamisée.
Technologie

Comment l'IA redéfinit les workflows créatifs en 2026

5 min de lecture · 22 août 2026

③ En-tête éditorial — Bannière d'article ou newsletter dark

QuandUn article de blog tech, une newsletter dark-mode ou une page de documentation utilise une bannière d'en-tête avant le corps du texte.
PourquoiLe fondu doux des nappes lumineuses remplace une image d'illustration sans aucune requête réseau. L'effet reste en retrait et laisse le titre lisible sur son scrim dégradé.
Réglageswidth: 100%; height: 200px; border-radius: 0. Réduire filter: blur() à 20px / 18px pour garder une légère définition des nappes dans un format horizontal étroit.

Comment ça marche

L'effet repose sur deux pseudo-éléments CSS (::before et ::after) appliqués sur .aurora-mesh. Chaque pseudo-élément empile plusieurs dégradés radiaux positionnés (radial-gradient(at X% Y%, …)) — cinq sur ::before (vert vif, cyan, violet, teal, vert aquatique) et trois sur ::after (vert aquatique, cyan, violet saturé). Les coordonnées at X% Y% définissent les foyers lumineux et les répartissent en constellation sur toute la surface.

Un filter: blur(30px) sur ::before et blur(25px) sur ::after noie les contours des dégradés dans un fondu atmosphérique. L'inset: -20% étend chaque pseudo-élément au-delà du conteneur afin que les translations et le scale des animations n'exposent jamais le fond noir aux bords — le débordement est masqué par overflow: hidden sur .aurora-mesh.

Les deux calques tournent sur des durées distinctes (auroraDrift 8 s, auroraDrift2 10 s), avec animation-direction: alternate et ease-in-out. 8 et 10 n'ont pas de rapport de fréquence simple : leur PPCM est 40 s, soit le temps avant que le motif exact se répète. Ce décalage de phase génère un mouvement organique imprévisible sans aucun code. Les keyframes combinent translate, scale et rotate de faible amplitude (±8 %, ±1,08, ±3°) pour un ondoiement naturel.

L'effet est 100 % CSS : aucun requestAnimationFrame, aucun canvas, aucun script. Il s'encapsule dans un composant, une carte ou une section entière sans toucher au code hôte — une seule <div class="aurora-mesh"> suffit, et plusieurs instances sur la même page sont indépendantes.

Accessibilité

  • prefers-reduced-motion non géré nativement : le code fourni ne contient pas de @media (prefers-reduced-motion: reduce). Pour un usage production, ajoutez .aurora-mesh::before, .aurora-mesh::after { animation: none; } dans ce media-query — l'aurore s'affiche alors figée mais toujours colorée, sans aucun mouvement.
  • Le code de base ne définit ni role ni aria-label sur .aurora-mesh. Pour un fond purement décoratif, aucun rôle n'est nécessaire. Si vous superposez du texte, ce texte reste dans le flux DOM et est lu normalement par les lecteurs d'écran.
  • La couleur de .aurora-mesh-label est rgba(255,255,255,0.9) sur fond rgb(10,10,15) — ratio de contraste supérieur à 15:1, conforme WCAG AAA.
  • L'effet ne définit aucun élément interactif. Tout CTA ajouté dans l'overlay doit rester dans le flux de tabulation normal ; le fond CSS ne crée aucune barrière clavier.
  • Pas de clignotement ni de flash (pas de steps(), pas d'alternance lumineuse brutale) — aucun risque photosensible intrinsèque. La durée infinie des animations reste à gérer via prefers-reduced-motion (voir point 1).

Compatibilité navigateur

Nécessite les animations CSS et filter: blur() — supportés dans tous les navigateurs modernes. Zéro dépendance externe.

Chrome 88+✓ Complet
Firefox 87+✓ Complet
Safari 15+✓ Complet
Edge 88+✓ Complet
Mobile iOS✓ Complet
Android Chrome✓ Complet

Sans support de <code>filter: blur()</code> (IE 11), les dégradés s'affichent sans flou — l'effet reste coloré mais perd le fondu atmosphérique. Aucune erreur JS, la page reste fonctionnelle.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

HTML 
<div class="aurora-mesh">
  <span class="aurora-mesh-label">AURORA</span>
</div>
CSS 
.aurora-mesh  {
   width: 320px;
   height: 220px;
   border-radius: 16px;
   position: relative;
   overflow: hidden;
   background: rgb(10, 10, 15);
   }

.aurora-mesh::before  {
   content: "";
   position: absolute;
   inset: -20%;
   background: radial-gradient(at 25% 30%, rgba(0, 255, 128, 0.6) 0%, transparent 50%), radial-gradient(at 70% 20%, rgba(0, 220, 255, 0.5) 0%, transparent 50%), radial-gradient(at 50% 70%, rgba(160, 0, 255, 0.5) 0%, transparent 50%), radial-gradient(at 15% 80%, rgba(0, 180, 200, 0.4) 0%, transparent 50%), radial-gradient(at 85% 60%, rgba(0, 255, 180, 0.35) 0%, transparent 50%);
   filter: blur(30px);
   animation: 8s ease-in-out 0s infinite alternate none running auroraDrift;
   }

.aurora-mesh::after  {
   content: "";
   position: absolute;
   inset: -20%;
   background: radial-gradient(at 60% 40%, rgba(80, 255, 200, 0.4) 0%, transparent 45%), radial-gradient(at 20% 60%, rgba(0, 200, 255, 0.35) 0%, transparent 45%), radial-gradient(at 80% 80%, rgba(120, 0, 255, 0.4) 0%, transparent 45%);
   filter: blur(25px);
   animation: 10s ease-in-out 0s infinite alternate none running auroraDrift2;
   }

.aurora-mesh-label  {
   position: relative;
   z-index: 1;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   font-size: 1.3rem;
   letter-spacing: 3px;
   color: rgba(255, 255, 255, 0.9);
   text-shadow: rgba(0, 255, 180, 0.5) 0px 0px 20px;
   }

@keyframes auroraDrift  {
   
  0%  {
   transform: translate(0px, 0px) scale(1) rotate(0deg);
   }
  33%  {
   transform: translate(5%, -8%) scale(1.05) rotate(2deg);
   }
  66%  {
   transform: translate(-5%, 5%) scale(0.95) rotate(-2deg);
   }
  100%  {
   transform: translate(8%, -3%) scale(1.02) rotate(1deg);
   }
}

@keyframes auroraDrift2  {
   
  0%  {
   transform: translate(0px, 0px) scale(1) rotate(0deg);
   }
  50%  {
   transform: translate(-8%, 6%) scale(1.08) rotate(-3deg);
   }
  100%  {
   transform: translate(6%, -6%) scale(0.96) rotate(2deg);
   }
}
JavaScript (fx-0071) 
// Effet CSS pur — pas de JavaScript nécessaire

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
::before radial-gradient colors vert #00ff80, cyan #00dcff, violet #a000ff, teal #00b4c8, aqua #00ffb4 Modifiez les valeurs rgba(R,G,B,opacité) dans les cinq radial-gradient de .aurora-mesh::before. Chaque nappe est indépendante — réduisez à 3 nappes pour un effet plus monochrome, ou ajoutez une teinte chaude pour un coucher de soleil spatial.
::after radial-gradient colors aqua #50ffc8, cyan #00c8ff, violet #7800ff Les trois nappes de ::after se mélangent avec ::before par superposition. Décolorez-les ou remplacez-les par des teintes roses/oranges pour une aurora plus chaude.
::before animation — durée 8s Rallongez à 14s pour un fondu ultra-lent (ambiance méditation) ou raccourcissez à 4s pour un mouvement énergique. Gardez un rapport non entier avec la durée de ::after pour préserver l'aspect organique.
::after animation — durée 10s Durée de auroraDrift2. Associée à la durée de ::before, elle détermine le temps avant que le motif se répète (PPCM des deux valeurs). Des durées premières entre elles (ex. 7s / 11s) rendent le cycle encore plus aléatoire.
filter: blur() 30px (::before), 25px (::after) Réduire à 12px / 10px pour des contours de nappes plus définis (look plasma). Augmenter à 50px / 45px pour un fondu ultra-doux adapté aux grands formats.
inset -20% Marge de débordement des pseudo-éléments. Sur de très grands conteneurs (plein écran), passer à -30% pour éviter que les animations de scale n'exposent le fond sombre aux coins.
.aurora-mesh background rgb(10, 10, 15) Fond de base visible sous les nappes et en repli. Adaptez à votre teinte sombre brand (ex. rgb(5,5,20) pour un bleu nuit, rgb(15,5,10) pour un violet nuit).

FAQ

Comment adapter Aurora Mesh à une section plein écran ?

Remplacez les valeurs par défaut width: 320px; height: 220px par width: 100%; height: 100vh. Ajoutez border-radius: 0. Pour un fond full-bleed, positionnez .aurora-mesh en position: absolute; inset: 0 à l'intérieur d'un parent position: relative. Augmentez également filter: blur() à 50px / 45px et inset à -30% pour que les animations ne découvrent pas les bords sur grand écran.

Pourquoi le mouvement paraît-il aléatoire avec seulement deux animations ?

Les deux calques (::before et ::after) tournent sur des durées de 8 s et 10 s avec animation-direction: alternate. Le motif exact ne se répète qu'après 40 s (PPCM de 8 et 10). Leurs keyframes combinent translation, scale et légère rotation dans des proportions différentes : la superposition des deux mouvements produit une interférence visuelle qui imite un mouvement organique sans aucun code de génération aléatoire.

Comment ajouter le support de prefers-reduced-motion ?

Le code fourni ne gère pas ce media-query. Ajoutez ce bloc après les @keyframes : @media (prefers-reduced-motion: reduce) { .aurora-mesh::before, .aurora-mesh::after { animation: none; } }. L'aurore s'affiche alors figée mais toujours colorée — les utilisateurs sensibles au mouvement voient le fond statique sans aucune transition.