Aller au contenu

Générateur de Dégradés en Maillage et Fonds Fluides

Créez des dégradés fluides avec points de contrôle interactifs, graines et exports PNG 4K.

Générateur de Dégradés en Maillage et Fonds Fluides

Générateur 100% Côté Client

Créez des dégradés fluides avec points de contrôle interactifs, graines et exports PNG 4K.

Préréglages de Style

Contrôles du Dégradé Mesh

Personnalisez la graine, les points de contrôle, le flou et la couleur de fond en temps réel.

Nombre de Points: 4 / 6

Personnalisez la graine, les points de contrôle, le flou et la couleur de fond en temps réel.

Un minimum de 4 points de contrôle est requis.

50 px
px

Personnalisez la graine, les points de contrôle, le flou et la couleur de fond en temps réel.

#0f172a

Personnalisez la graine, les points de contrôle, le flou et la couleur de fond en temps réel.

Point Sélectionné

point-1

21 %
%

Personnalisez la graine, les points de contrôle, le flou et la couleur de fond en temps réel.

34 %
%

Personnalisez la graine, les points de contrôle, le flou et la couleur de fond en temps réel.

#2beeb3

Personnalisez la graine, les points de contrôle, le flou et la couleur de fond en temps réel.

Canevas de Dégradé en Direct
Canevas Interactif

Glissez les points ou utilisez les touches fléchées / curseurs pour repositionner.

1
2
3
4

Exporter et Télécharger

background-color: #0f172a;
background-image:
    radial-gradient(at 21% 34%, #2beeb3 0px, transparent 55%),
    radial-gradient(at 73% 26%, #3c5bf6 0px, transparent 55%),
    radial-gradient(at 37% 67%, #ea62ad 0px, transparent 55%),
    radial-gradient(at 68% 70%, #f6ec60 0px, transparent 55%);
filter: blur(50px);
Résolution d'Export

Fond d'Écran PNG Haute Résolution

How CSS Mesh Gradients and Layered Radial Gradients Work

Mesh gradients create organic, fluid color transitions by blending multiple independent color nodes across a two-dimensional surface. Rather than restricting colors to linear or conical paths, mesh gradients distribute radial color fields from customized focal points with smooth transparent falloffs.

Mathematical Foundation of Seeded PRNG Generation

Deterministic generation uses a pseudo-random number generator (Mulberry32 PRNG) initialized with a 32-bit unsigned integer seed. Every execution with the same seed reproduces the exact spatial coordinates, color distributions, and layer hierarchies without variance:

s = (s + 0x6D2B79F5) >>> 0;
t = Math.imul(s ^ (s >>> 15), 1 | s);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;

Multi-Resolution Client-Side Canvas Rasterization

Exported PNGs are rendered directly on client-side HTML5 2D canvas surfaces at full device resolutions: 1080p Full HD (1920×1080), 2K Quad HD (2560×1440), and 4K Ultra HD (3840×2160). Because all rendering occurs strictly within your local browser sandbox without requesting external assets, exported canvases remain completely untainted and 100% private.

Frequently Asked Questions

Comment fonctionnent les dégradés mesh en pur CSS sans image ?
Ils superposent plusieurs déclarations radial-gradient() à diffusion transparente sur une couleur de fond. Le filtre blur() du CSS assure un fondu fluide et organique calculé en direct par le navigateur.
Qu'est-ce que la génération déterministe avec graine ?
L'algorithme PRNG Mulberry32 dérive mathématiquement les positions et les harmonies de couleurs depuis un nombre entier. La même graine recrée à chaque fois la configuration exacte.
Les fonds d'écran 4K sont-ils générés localement ?
Oui. Le rendu est tracé sur un Canvas HTML5 local jusqu'en résolution 3840×2160 pixels sans aucun transfert réseau.
Puis-je utiliser ces dégradés dans des projets commerciaux ?
Oui. Tout le code CSS et les images PNG générés sont libres de droits et utilisables pour des sites web et des applications commerciales.