Aller au contenu
FreeKitX

Générateur de Dégradés Mesh

Ajouter cet outil aux favoris

Enregistrez cette page dans votre navigateur

Sur téléphone, choisissez Ajouter aux favoris dans le menu Partager ou le menu du navigateur.

Concevez de superbes dégradés mesh multicouches avec points de contrôle, tirage aléatoire et export 4K dans le navigateur.

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

Gratuit · Traitement local

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

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

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

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

#2beeb3
#0f172a
50 px
px

Ajustez l’intensité du flou pour des transitions plus douces entre les points de couleur.

Paramètres Avancés

Utilisez une graine numérique pour reproduire de manière déterministe le même dégradé.

Point Sélectionné: point-1
21 %
%
34 %
%

Exporter et Télécharger

Variante CSS

Déclarations d'arrière-plan standard sans flou de filtre. Sûr pour tous les éléments.

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%);

Outils associés

Réponse directe

Un dégradé en maillage (mesh gradient) est un effet visuel contemporain qui fusionne plusieurs points de couleur radiaux sur une surface bidimensionnelle, produisant des transitions fluides et organiques sans axes linéaires rigides.

Comment utiliser cet outil

1

Positionner les points de couleur et préréglages

Faites glisser 4 à 6 points de contrôle sur le canevas ou choisissez un préréglage pour harmoniser les teintes.

2

Ajuster la diffusion et la graine aléatoire

Modifiez le rayon de flou pour adoucir les mélanges, ou saisissez une graine numérique pour reproduire fidèlement l'effet.

3

Copier le CSS ou exporter le fond d'écran

Copiez des déclarations CSS légères, intégrez la règle isolée complète, ou téléchargez des fonds PNG jusqu'en résolution 4K.

Implémentation CSS des dégradés mesh : Arrière-plan uniquement vs CSS complet

Les dégradés mesh natifs du navigateur sont créés en superposant plusieurs couches de radial-gradient() sur une couleur de base unie. Le mode « Arrière-plan uniquement » fournit des déclarations pures sans filtre de flou sur l'élément, garantissant une intégration sans risque dans n'importe quel conteneur. Le mode « CSS complet » applique le flou à un pseudo-élément ::before isolé avec débordement étendu, assurant que les textes, liens et boutons enfants restent nets et parfaitement cliquables.

background-image: radial-gradient(at x1 y1, c1, transparent r1), radial-gradient(at x2 y2, c2, transparent r2);
  • Arrière-plan uniquement : Dégradés radiaux superposés légers et sans flou de filtre ; sans danger pour la mise en page.
  • CSS complet : Pseudo-élément ::before isolé avec filtre blur ; les éléments enfants restent nets et interactifs.
  • Graine déterministe : L'algorithme PRNG Mulberry32 garantit une reproduction rigoureusement identique des couleurs et coordonnées.

Questions fréquentes

Comment fonctionnent les dégradés mesh en pur CSS sans aucune image ?

Ils combinent plusieurs déclarations CSS radial-gradient() comportant des arrêts de couleur transparents sur un fond uni. Le moteur de rendu du navigateur effectue l'interpolation des zones translucides superposées pour créer un aspect liquide naturel.

Quelle est la différence entre les modes « Arrière-plan uniquement » et « CSS complet » ?

Le mode « Arrière-plan uniquement » génère des propriétés CSS standard sans filtre, assurant une compatibilité universelle sans effet secondaire. Le mode « CSS complet » utilise un pseudo-élément ::before flouté de façon isolée, offrant une diffusion plus riche sans rendre les textes enfants flous.

Quelles sont les considérations de performance et limitations du navigateur ?

Superposer de nombreux dégradés radiaux avec des filtres de flou élevés peut accroître la charge de redessin lors du défilement rapide sur des smartphones aux processeurs graphiques modestes. De plus, l'export de fonds d'écran 4K s'exécute localement dans le Canvas et peut demander un court temps de calcul sur du matériel ancien.

Mes créations de dégradés ou images sont-elles téléversées sur un serveur distant ?

Absolument pas. L'intégralité des calculs de couleur, l'évaluation de la graine PRNG, la génération du CSS et la rastérisation Canvas s'exécutent localement à 100 % dans votre navigateur.

Références et normes faisant autorité