Générateur Dégradé Mesh CSS & Fond SVG

Générateur Dégradé Mesh CSS & Fond SVG

Générez des dégradés de maillage CSS multi-points, des arrière-plans animés et des maillages SVG. Ajustez les points de contrôle, le grain argentique et exportez le code CSS ou Tailwind.

Préréglages :
Scène de maillage interactive
1
2
3
4
Glissez les points sur la toile pour ajuster la position en temps réel4 / 12 Points de la toile
Point de contrôle actif #1
Coordonnée X (%)15%
Coordonnée Y (%)20%
Rayon de diffusion75%
Opacité du point90%
Couleur:
Couleur de fond de base:
Topologie du maillage
Grain argentique & bruit SVG
18%
Objectif de contraste cibleTexte blanc (#FFFFFF)
Cadrage du viewport
Fluidité GPU 60 FPS4 Couches radiales empilées (SRGB)
/* Modern CSS Mesh Gradient (SRGB) */
:root {
  --mesh-base: #0d0b1a;
  --mesh-point-1: rgba(99, 102, 241, 0.90);
  --mesh-point-2: rgba(6, 182, 212, 0.85);
  --mesh-point-3: rgba(236, 72, 153, 0.80);
  --mesh-point-4: rgba(139, 92, 246, 0.90);
}

.mesh-container {
  background-color: var(--mesh-base);
  background-image:
    radial-gradient(at 15% 20%, rgba(99, 102, 241, 0.90) 0px, transparent 75%),
    radial-gradient(at 80% 15%, rgba(6, 182, 212, 0.85) 0px, transparent 85%),
    radial-gradient(at 30% 85%, rgba(236, 72, 153, 0.80) 0px, transparent 90%),
    radial-gradient(at 85% 80%, rgba(139, 92, 246, 0.90) 0px, transparent 70%);
}
Taille du code généré: 644 octetsScore de conformité WCAG 2.1:Note d'accessibilité
Fluidité GPU 60 FPSDérive ambiante active
Points de la toile4 Couches radiales empilées
Score de conformité WCAG 2.1Audit de contraste actif
Taille du code généré644 octets
Espace colorimétrique (Gamut)SRGB
Mode de comparaison A/BScenario A

Traitement local dans le navigateur

Calculs haute performance exécutés intégralement dans la mémoire du navigateur sans dépendance externe.

Zéro transmission serveur

Toutes les données restent strictement locales avec zéro requête ou télémétrie externe.

Export prêt pour la production

Formats de sortie CSS et SVG épurés, optimisés pour un déploiement immédiat.

ToolsAA•Utilitaires web 100% privés côté client
Référence technique et guide d'architecture

Générateur de Dégradé Mesh CSS & SVG — Guide de référence

Générez des dégradés mesh CSS multipoints, des arrière-plans animés et des maillages SVG. Ajustez les points de contrôle, le grain et exportez en CSS ou Tailwind.

Générateur de Dégradé Mesh CSS & SVG — Guide de référence — Architecture en mémoire côté client et flux de données
Générateur de Dégradé Mesh CSS & SVG — Guide de référence — Architecture en mémoire côté client et flux de données

Paramètres clés et contrôles

Coordonnées des points (x, y)Pourcentage (0 % à 100 %)

Définit le centre focal 2D de chaque source lumineuse sur le canevas. En CSS radial-gradient, cette valeur correspond directement à la syntaxe de positionnement 'at x% y%', déterminant le point d'ancrage de l'intensité chromatique maximale.

Par défaut : 50%, 50%
Rayon de diffusion / Étendue (spread)Pourcentage ou rayon en pixels (10 % à 150 %)

Régule la distance de diffusion radiale depuis la saturation chromatique maximale jusqu'à la transparence totale. Un pourcentage élevé crée un fondu bicubique doux et continu, tandis qu'un rayon restreint produit un effet de faisceau ciblé ou d'orbe néon percutant.

Par défaut : 80%
Couleur de fond du canevas (mesh_base_color)Chaîne de couleur HEX ou RGB

Définit la couleur d'arrière-plan sous-jacente du canevas. Toutes les couches radial-gradient transitionnent vers 'transparent' en fusionnant avec cette teinte de base, qui sert également de solution de repli (fallback) pour les navigateurs anciens.

Par défaut : #131116
Intensité et opacité du grain (grain_intensity)Multiplicateur flottant (0.0 à 1.0)

Contrôle l'opacité et la fréquence du filtre de bruit procédural SVG feTurbulence en surimpression. Le grain élimine l'effet de banding (lignes de contour) des écrans 8 bits et confère une texture organique d'inspiration argentique ou papier.

Par défaut : 0.15
Durée d'animation et dérive (drift)Secondes (4s à 30s) et décalage en pixels

Spécifie la période de boucle et l'amplitude de déplacement du flottement ambiant via des @keyframes CSS. Les points oscillent de façon fluide selon des trajectoires sinusoïdales pour générer un arrière-plan vivant sans saturer le CPU.

Par défaut : 12s
Ratio de contraste WCAG (wcag_contrast_ratio)Ratio (1:1 à 21:1)

Contraste de luminance perceptuelle mesuré entre la typographie et la surface du dégradé sur 9 quadrants distincts, évalué selon les critères d'accessibilité WCAG 2.1 niveaux AA (4,5:1) et AAA (7:1).

Par défaut : 4.5:1

Conseils de pro et bonnes pratiques

Éliminer le banding 8 bits grâce au dithering et au bruit SVG

Les moniteurs standard affichent les couleurs sur 8 bits par canal (256 nuances), ce qui provoque souvent des marches de dégradé disgracieuses (banding) sur de larges surfaces. L'injection d'une fine couche de bruit SVG feTurbulence à une opacité de 3 % à 5 % agit comme un tramage (dithering) haute fréquence qui disperse les valeurs de pixels et supprime intégralement ces artefacts visuels.

Atteindre 60 FPS constants grâce aux calques de transformation GPU

Animer directement background-position ou les coordonnées radial-gradient force le navigateur à recalculer la mise en page (reflow) et à repeindre continuellement (repaint), entraînant des saccades sur mobile. Pour garantir une fluidité parfaite à 60 FPS, isolez les nœuds de couleur dans des pseudo-éléments (::before / ::after) ou des calques dédiés, puis animez transform: translate3d(x, y, 0) avec will-change: transform afin de déléguer le rendu au compositeur matériel GPU.

Garantir la lisibilité du texte sur les quadrants à fort contraste

Les dégradés mesh combinent souvent des zones sombres et lumineuses, rendant une couleur de texte unique illisible sur certaines portions de l'écran. Consultez systématiquement l'inspecteur de contraste WCAG sur les 9 quadrants : en cas de forte disparité, appliquez un léger voile sombre (ex. linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6))) ou une carte glassmorphique avec backdrop-filter sous les éléments textuels.

Optimiser les dégradés mesh pour vos projets Tailwind CSS

Au lieu d'alourdir votre balisage HTML avec de longues chaînes radial-gradient en ligne, déclarez vos dégradés mesh générés directement dans l'objet theme.extend.backgroundImage de votre fichier tailwind.config.js (ex. 'mesh-hero': 'radial-gradient(...)'). Vous pourrez ainsi appliquer des classes utilitaires concises comme bg-mesh-hero tout en bénéficiant de la purge automatique et de l'optimisation au build.

Pièges courants et dépannage

⚠️Bandes de couleurs visibles et lignes de contour pixelisées sur les transitions de dégradé

L'effet de banding apparaît lorsque deux nuances adjacentes présentent des valeurs de luminance trop proches sur les dalles 8 bits. Activez la surcouche de grain / bruit à une opacité de 10 % à 15 % pour tramer les frontières de transition, ou augmentez le rayon de diffusion radiale (> 80 %) afin d'élargir la plage d'interpolation.

⚠️Consommation CPU excessive ou ralentissements sur mobile lors de l'animation du dégradé mesh

N'animez jamais directement les pourcentages de radial-gradient dans des @keyframes CSS. Exportez plutôt le code d'animation optimisé fourni par ce générateur : il isole les nœuds de dégradé sur des calques GPU dédiés grâce à will-change: transform et à des vecteurs de translation 3D (translate3d), réduisant ainsi les opérations de redessin CPU à zéro.

⚠️Écran noir ou découpage inattendu du filtre de dégradé SVG sous Safari iOS

Le moteur WebKit de Safari tronque les filtres SVG lorsque l'attribut filterUnits ou les dimensions du cadre de délimitation (bounding box) ne sont pas explicitement définis. Lors de l'intégration du code SVG brut, assurez-vous que la balise <filter> comporte x='-20%' y='-20%' width='140%' height='140%' filterUnits='userSpaceOnUse' afin d'éviter tout rognage de la zone d'effet.

⚠️Erreur de syntaxe du compilateur Tailwind CSS sur les valeurs arbitraires de radial-gradient

Les valeurs arbitraires de Tailwind (bg-[...]) ne tolèrent aucun espace brut non échappé. Remplacez les espaces de la syntaxe par des traits de soulignement (ex. radial-gradient(at_20%_30%,_#6366f1_0px,_transparent_70%)) ou intégrez directement la configuration générée dans tailwind.config.js sous theme.extend.backgroundImage.

Foire aux questions (FAQ)

Comment créer un dégradé mesh en pur CSS sans image externe ni SVG ?▼

Vous pouvez concevoir un dégradé mesh en pur CSS en superposant plusieurs couches de radial-gradient sur une couleur de fond unique (background-color). Chaque radial-gradient définit un centre focal précis (ex. 'radial-gradient(at 20% 30%, #6366f1 0px, transparent 70%)') qui se dissout vers la transparence, permettant à plusieurs sources lumineuses de se croiser et de fusionner harmonieusement sans dépendance externe.

Comment animer un dégradé mesh CSS pour l'arrière-plan d'une section hero ?▼

Pour animer un dégradé mesh à 60 FPS sans saccade, associez chaque nœud de couleur à un conteneur en position absolue ou à un pseudo-élément doté d'un flou CSS prononcé (ex. filter: blur(60px)). Appliquez ensuite des @keyframes CSS avec des transformations translate3d(dx, dy, 0) et scale() afin d'exploiter le moteur de composition GPU du navigateur plutôt que de déclencher de lourds recalculs CPU.

Quelle est la différence entre un dégradé mesh en CSS radial-gradient et un mesh SVG ?▼

Un maillage en CSS radial-gradient repose sur l'empilement natif de background-image, ne requérant aucune requête HTTP externe, n'ajoutant aucun poids de fichier et s'affichant instantanément dans tous les navigateurs modernes. Un dégradé mesh SVG utilise un balisage vectoriel (<radialGradient> ou maillages de courbes de Bézier bicubiques), offrant une mise à l'échelle vectorielle indépendante de la résolution et des filtres avancés (comme le bruit feTurbulence), au prix d'un DOM légèrement plus complexe.

Comment ajouter une texture de grain argentique ou de bruit à un dégradé mesh CSS ?▼

Pour intégrer une texture de grain argentique, superposez un filtre de bruit SVG via un data URI ou un élément SVG inline. Le filtre emploie <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/> fusionné sur le dégradé CSS avec la propriété mix-blend-mode: overlay et une opacité comprise entre 0,10 et 0,20, supprimant ainsi le banding 8 bits tout en apportant une finition tactile élégante.

Un dégradé mesh CSS complexe affecte-t-il les performances web ou le score Lighthouse ?▼

Les dégradés mesh en CSS pur statique n'ont quasiment aucun impact sur les scores de performance Lighthouse : ils ne nécessitent aucun transfert réseau, aucun décodage d'image et sont rastérisés directement par le GPU. En revanche, animer de lourds filtres CSS (blur > 100px) sur mobile peut solliciter excessivement le processeur ; l'utilisation de nos @keyframes translate3d pré-optimisés assure un rendu fluide à 60 FPS sans décharger la batterie.

Comment garantir la lisibilité du texte et le respect des normes WCAG sur un dégradé mesh ?▼

Dans la mesure où la luminance varie selon les zones d'un dégradé mesh, utilisez notre analyseur de contraste WCAG sur 9 quadrants pour évaluer les ratios. Vérifiez que toutes les zones contenant du texte maintiennent un ratio d'au moins 4,5:1 pour le texte courant (WCAG niveau AA) ou 3:1 pour les grands titres. Si un quadrant s'avère inférieur au seuil, ajoutez un voile semi-transparent sombre ou clair sous le bloc de texte.

Outils et utilitaires connexes

Tous les outils →
Générateur d'URL UTM & CampagnesDéveloppement

Créez, validez et générez par lots vos liens de suivi de campagne Google Analytics GA4 avec notre générateur UTM gratuit. Nettoyez vos URL, extrayez les balises existantes et exportez des QR codes.

Ouvrir l'outil→
Formateur & Validateur JSONDéveloppement

Formatez, embellissez, validez et réparez vos flux JSON en ligne instantanément. Corrigez les erreurs de syntaxe, clés sans guillemets, minifiez et inspectez l'AST sans aucun transfert serveur.

Ouvrir l'outil→
Encodeur & Décodeur Base64 (URL-Safe)Développement

Encodez et décodez instantanément du texte ou des fichiers en Base64. Compatible base64url, UTF-8, retours MIME, Data URLs et correction d'erreurs en direct.

Ouvrir l'outil→
Convertisseur JSON vers TypeScript Interface & TypesDéveloppement

Convertissez vos données JSON en interfaces ou alias de type TypeScript propres et typés, avec inférence automatique des structures imbriquées.

Ouvrir l'outil→
Générateur de Schémas Zod depuis JSON (Validation Runtime TypeScript)Développement

Déduisez et générez des schémas Zod TypeScript, des définitions de types et des règles de validation imbriquées à partir de données JSON brutes.

Ouvrir l'outil→
Générateur de schéma JSON vers TypeBox (Fournisseur de types JSON Schema rapide)Développement

Convertissez des structures JSON en définitions TypeBox Type.Object haute performance pour Fastify, Ajv et la validation TypeScript à l'exécution.

Ouvrir l'outil→