Générateur de fond CSS Aurora / Gradient Blob

Un fond d'aurora en gradient est un style de fond qui imite les bandes lumineuses floues de l'aurora boréale. Il est généralement construit en superposant plusieurs grands spots colorés fortement flous sur une base sombre, afin que les couleurs s'effacent doucement les unes aux autres plutôt que de se rencontrer sur des lignes nettes. Ce style est devenu populaire sur les pages d'accueil des plateformes SaaS car il ajoute une profondeur et une atmosphère dynamique sans la lourdeur visuelle d'une photographie.

Un gradient radial dessine un spot circulaire qui s'atténue jusqu'à un point choisi, de sorte que la superposition de plusieurs de ces gradients produit des disques colorés aux bords nets. L'application de filter:blur au niveau du gradient affaiblit ces disques en moyennant chaque pixel avec ses voisins, ce qui transforme les cercles durs en des bulles lumineuses floues. L'augmentation du rayon de flou étend davantage ce moyennage, ce qui fait que les bulles semblent plus grandes et plus diffuses, même si les gradients sous-jacents n'ont pas changé.

Les deux appliquent un flou de type Gaussien, mais ils se trouvent dans des pipelines de rendu différents. CSS filter:blur est rapide et accéléré par le matériel dans la plupart des navigateurs, mais il peut couper aux bords de l'élément et interagir mal avec les transformations, les contextes de pile ou les filtres de fond. SVG feGaussianBlur fait partie du graphe de filtre SVG, donc il compose de manière prévisible au sein de la zone de vue SVG et est facile à intégrer comme un élément autonome, ce qui est utile lorsque vous souhaitez que le fond suive le code HTML ou le rendre en image.

Les filtres de flou lourds obligent le navigateur à recréer de grandes zones à chaque frame, et un rayon de flou élevé augmente la taille du noyau que le GPU doit convoluer. Sur les appareils de faible performance, l'animation d'un élément fortement flou ou la superposition de plusieurs couches floues sur du contenu en défilement peut réduire la fréquence de rafraîchissement et drainer la batterie. Les solutions courantes consistent à garder les couches floues statiques, à les pré-réndrer en image quand c'est possible, ou à les placer sur une couche composée séparée afin que le reste de la page ne se réfléchisse pas à chaque défilement.