Générateur d'arrière-plans dégradés animés — 11 styles WebGL, aperçu en direct
Aperçu de onze arrière-plans dégradés et abstraits animés, rendus en direct avec WebGL : blobs fluides, lumière ambiante, dégradés par paliers, points flous, grilles, cubes, vagues et mosaïques de triangles. Changez de style et parmi six palettes intégrées instantanément, sans envoi ni serveur — c'est un outil d'aperçu en direct, pas un exportateur CSS ou d'images.
Ce que ce générateur d'arrière-plans offre vraiment
Onze styles d'arrière-plan pilotés par shader
AbstractShape, AestheticFluid, AmbientLight, BigBlob, BlurDot, BlurGradient, GridArray, RandomCubes, StepGradient, TrianglesMosaic et WavyWaves — tous animés en continu sur un canevas de 600 pixels de haut.
Changement instantané de style et de palette
Deux listes déroulantes suffisent : une pour le style d'arrière-plan, une pour la palette. Chaque modification reconstruit aussitôt l'animation, sans bouton de génération ni rechargement de la page.
Six palettes intégrées
Monochrome, Red, Green, Blue, Yellow et Purple, chacune une liste codée en dur de six couleurs hexadécimales. Les styles à quatre couleurs n'utilisent que les quatre premières valeurs, ceux à six couleurs les six ; les couleurs superflues sont tronquées.
Fonctionne localement sur votre GPU
Chaque image est dessinée via WebGL dans le navigateur. Rien n'est envoyé, aucune requête serveur n'est faite, et l'animation continue sans trafic réseau.
Un bac à sable d'aperçu, pas un outil d'export
Il n'y a ni sortie CSS, ni téléchargement PNG ou SVG, ni bouton aléatoire, ni option de bruit ou de texture, ni préréglages enregistrés. L'angle, les arrêts de couleur, la superposition et la vitesse ne sont pas exposés non plus.
FAQ du générateur d'arrière-plans
Quels types de dégradés sont pris en charge — linéaire, radial, conique ou mesh ?
Aucun des types CSS, à proprement parler. Cette page affiche onze arrière-plans à shader WebGL : AbstractShape, AestheticFluid, AmbientLight, BigBlob, BlurDot, BlurGradient, GridArray, RandomCubes, StepGradient, TrianglesMosaic et WavyWaves. Plusieurs ressemblent à des dégradés fluides de style mesh, mais ce sont des animations de canevas et non des dégradés background-image.
Que puis-je régler ?
Seulement deux choses : la liste déroulante des styles et celle des palettes. Aucun réglage d'angle, de position d'arrêt de couleur, de calque, de sélecteur de couleur, de vitesse, de pause ou de boucle. Les palettes sont six échantillons fixes, et chaque style en utilise quatre ou six.
Puis-je exporter l'arrière-plan en image ?
Non. Il n'y a nulle part de toDataURL, de toBlob ni de logique de téléchargement sur la page : le canevas peut seulement être consulté, impossible de l'enregistrer en PNG, JPEG ou SVG.
Génère-t-il du code CSS que je peux copier ?
Non. Il n'y a ni sortie CSS ni bouton copier. Ces arrière-plans sont des canevas WebGL, pas des dégradés background-image, donc ils ne peuvent pas se réduire à un extrait CSS ; pour cela, il vous faut un outil de dégradés CSS séparé.
Y a-t-il des préréglages, de la génération aléatoire, du bruit ou des réglages enregistrés ?
Les seuls préréglages sont les six palettes intégrées. Pas de bouton aléatoire (la graine est fixée à 1000), pas d'option de bruit ou de texture, et pas d'enregistrement dans le stockage local — recharger la page ramène à AbstractShape avec la première palette.
Que se passe-t-il quand je change de style ou de palette ?
Chaque changement crée une nouvelle instance d'arrière-plan et ajoute un autre canevas au même conteneur ; l'ancienne instance n'est jamais détruite, donc plusieurs canevas portant le même id s'empilent et le plus récent est celui que vous voyez. Rechargez la page si vous avez beaucoup changé.
Tout fonctionne-t-il en local ?
Oui. Le rendu se fait entièrement dans votre navigateur et sur votre GPU via WebGL, sans envoi ni requête serveur. Le revers : un navigateur sans prise en charge de WebGL n'a aucun rendu de secours.
