# Générateur de maillage de dégradés CSS (conique + radial) Génère le « maillage de dégradés » à la mode sur Dribbble/Behance depuis 2024 : plusieurs dégradés radiaux (tache de couleur → fondu vers du transparent de même teinte) empilés sur une couleur de base (éventuellement une couche conique), avec modes de fusion, grain de film SVG, dispositions seedées (coins / anneau / dispersion / grille), aperçu en direct, CSS copiable et classe arbitraire Tailwind. Les taches s'estompent en hex 8 chiffres #RRGGBB00, évitant l'anneau gris du mot-clé transparent. > Page canonique: https://elysiatools.com/fr/tools/css-gradient-mesh-generator - **Catégorie:** Design - **Mots-clés:** maillage dégradé css, dégradé conique, couches radiales, fond aurore, tailwind dégradé ## Présentation Syntaxe centrale (MDN) : dans un background-image multicouche, la première couche est au-dessus ; une couche radiale s'écrit radial-gradient(circle at x% y%, #couleur 0%, #couleur00 60%) — arrêt transparent à 35–50 % = taches nettes, 50–70 % = maillage classique (60 % par défaut), 80–100 % = fond doux ; la couleur de base va dans background-color. La couche conique conic-gradient(from Xdeg at 50% 50%, …) apporte la variation angulaire type aurore. La liste background-blend-mode correspond à l'ordre des couches (normal / multiply encre / screen lumineux / overlay milieux saturés / soft-light aurore douce / hue / difference psychédélique). Le grain est un data-URI SVG feTurbulence en ligne à faible opacité + mix-blend-mode: overlay. Les dispositions sont pilotées par une graine mulberry32 : même graine, même maillage. L'export Tailwind est une valeur arbitraire unique (espaces → tirets bas) : bg-[radial-gradient(circle_at_20%_25%,_#7c3aed_0%,_#7c3aed00_60%),…] + bg-[#base]. ## Entrées - **Palette prédéfinie** (select) - **Couleur personnalisée 1** (color) - **Couleur personnalisée 2** (color) - **Couleur personnalisée 3** (color) - **Couleur personnalisée 4** (color) - **Nombre de taches de couleur** (number) - **Disposition des taches** (select) - **Graine aléatoire** (number) - **Fondu (arrêt transparent %)** (number) - **Mode de fusion** (select) - **Ajouter une base conique** (checkbox) - **Angle de départ conique (degrés)** (number) - **Ajouter un grain de film** (checkbox) ## Quand l'utiliser - Créer une section héros moderne ou une bannière visuelle pour une landing page sans charger d'images matricielles. - Générer des arrière-plans d'ambiance avec effet aurore ou lumière diffuse directement en CSS natif. - Intégrer des fonds graphiques complexes dans un projet Tailwind CSS via des classes arbitraires personnalisées. ## Fonctionnement - Sélectionnez une palette prédéfinie ou configurez jusqu'à quatre teintes personnalisées. - Définissez la disposition des taches (coins, anneau, dispersion, grille), leur nombre et l'atténuation du fondu. - Activez si souhaité la base conique, le grain de film SVG et choisissez le mode de fusion des calques. - Copiez le code CSS généré ou la classe utilitaire Tailwind prête à coller dans votre code source. ## Cas d'usage - Arrière-plans immersifs pour sections d'en-tête de sites web et portfolios. - Fonds diffus pour cartes d'interface utilisateur, panneaux tarifaires et fenêtres modales. - Textures légères et esthétiques pour applications web ne nécessitant aucune requête de fichier image. ## Questions fréquentes ### Pourquoi utiliser des codes couleur à 8 chiffres plutôt que le mot-clé transparent ? L'utilisation de la même teinte avec opacité nulle (#RRGGBB00) évite l'apparition d'un cercle grisâtre intermédiaire généré par le mot-clé transparent standard. ### À quoi sert la graine (seed) aléatoire ? Elle pilote l'algorithme de positionnement afin de régénérer ou reproduire à l'identique une disposition de dispersion spécifique. ### Comment le grain de film est-il injecté ? Le grain repose sur un motif SVG feTurbulence encodé en data-URI, combiné à un pseudo-élément avec un mode de fusion incrustation. ### Quel est le rôle du réglage de fondu (falloff) ? Il ajuste le point d'arrêt de l'opacité : un pourcentage bas crée des taches nettes, tandis qu'un pourcentage élevé produit un voile très diffus. ### Comment intégrer le résultat dans Tailwind CSS ? L'outil fournit une syntaxe à valeur arbitraire bg-[...] où les espaces sont remplacés par des tirets bas pour respecter les contraintes du moteur Tailwind. ## Outils associés - [Générateur de sprite sheet SVG](https://elysiatools.com/fr/tools/svg-sprite-generator): Téléversez jusqu'à 30 icônes SVG et fusionnez-les en une seule sprite sheet : mode pour en ligne, mode pour fragments de fichier externe. Normalise le viewBox (déduit de width/height), déduplique les icônes, peut retirer fill/stroke pour currentColor, nettoie toujours et attributs on\*, et génère les snippets HTML / React / Vue / CSS avec aperçu en direct de chaque icône. - [Générateur de snippets CSS glassmorphism / neumorphisme](https://elysiatools.com/fr/tools/glassmorphism-css-snippet-builder): Génère de bout en bout le snippet CSS glassmorphism ou neumorphisme complet : réglez flou, saturation, opacité de teinte, rayon, bordure, ombre extérieure et reflet supérieur ; en option superposition de grain SVG feTurbulence et repli @supports ; préfixe -webkit-backdrop-filter ajouté automatiquement (requis avant Safari 18) et correspondance des classes Tailwind (avec la note v3/v4), avec aperçu en direct de la carte sur fond dégradé. - [Generateur de Favicon SVG](https://elysiatools.com/fr/tools/svg-favicon-generator): Transforme un logo SVG ou raster en pack favicon complet avec ICO, variantes PNG, icone Apple Touch et web manifest - [Outil de Filigrane Diagonal](https://elysiatools.com/fr/tools/image-watermark-diagonal): Ajoutez des filigranes diagonaux aux images avec angle, taille, opacité et positionnement le long de la diagonal personnalisables - [Outil de Mosaique de Filigrane](https://elysiatools.com/fr/tools/image-watermark-tile): Ajoutez des filigranes en mosaïque aux images avec taille, opacité, espacement et motifs personnalisables - [Générateur de Data URI](https://elysiatools.com/fr/tools/data-uri-generator): Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown - [Pyramide de Biomasse et Flux d'Énergie (loi des 10%)](https://elysiatools.com/fr/tools/biomass-pyramid): Génère une pyramide trophique selon la loi de Lindeman : saisissez l'énergie/biomasse des producteurs E₁, l'efficacité de transfert (10% par défaut, 0.1–40%) et le nombre de niveaux (3–6). Vous obtenez l'énergie/biomasse de chaque niveau, son pourcentage des producteurs et la perte à chaque transfert (respiration, egestion, non-prédation). Rend une pyramide SVG colorée (largeurs à l'échelle √E pour la lisibilité ; les valeurs affichées sont toujours réelles) et un tableau par niveau, et explique pourquoi les pyramides d'énergie sont toujours droites alors que celles de nombres/biomasse peuvent s'inverser (ex. écosystèmes marins). Efficacités réelles typiques : 5–20%. - [Décomposeur d’ordre des traits chinois](https://elysiatools.com/fr/tools/chinese-stroke-order-decomposition): Décompose un caractère chinois en sa séquence de traits et sa structure de radicaux, et rend une démonstration SVG de l’ordre des traits avec coloration des composants. ## Exemples - [Exemples SVG](https://elysiatools.com/fr/samples/svg-samples): Exemples de graphiques vectoriels évolutifs (SVG) démontrant diverses fonctionnalités et techniques SVG - [Tailwind CSS Samples](https://elysiatools.com/fr/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format - [Exemples du Framework CSS Bulma](https://elysiatools.com/fr/samples/bulma): Exemples du framework CSS Bulma incluant les colonnes, composants, contrôles de formulaire, système de mise en page et modèles de conception modernes basés sur CSS ## Contenu associé - [Outils de Workflow pour SVG, Favicon et Icônes](https://elysiatools.com/fr/hubs/svg-favicon-icon-workflows): Generez des packs favicon, optimisez des SVG, convertissez des icones entre ICO, PNG, JPG, WebP et SVG, et preparez des assets web dans un seul hub. - [Outils d encodage et de conversion audio](https://elysiatools.com/fr/hubs/audio-convert): Comparez la conversion de formats audio, les changements de debit, la conversion de frequence d echantillonnage, les changements de codec et les exports dans un meme hub. - [Outils de conversion de formats d image et d export anime](https://elysiatools.com/fr/hubs/image-convert): Comparez les convertisseurs d image pour JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 et les exports orientes animation dans un meme hub. - [Outils d interchange JSON et de traduction de formats](https://elysiatools.com/fr/hubs/json-convert): Comparez les outils de conversion JSON pour CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN et d autres formats structures dans un meme hub.