Tiny Online Tools logoTiny Online ToolssearchRechercher des outils…grid_viewTous les outils
Accueilchevron_rightOutils SVGchevron_rightGénérateur de Dégradé MeshGénérateur de Dégradé Mesh

Générateur de Dégradé Mesh

Créez des arrière-plans dégradés "mesh" en SVG en mélangeant plusieurs points de couleur radiaux — comme un mesh gradient CSS.

Arrière-planPoints du mesh
Dimensions de sortieResponsive (s'étire au conteneur)Code generecodeSVGbrushCSS
xml
css

Outils similaires

Générateur de Dégradé Granuleux

Générateur de Dégradé Granuleux

Générez des arrière-plans en dégradé granuleux au format SVG avec contrôle du type de dégradé, des arrêts, de l'intensité du grain et de l'échelle de texture.

Générateur de Blobs SVG

Générateur de Blobs SVG

Créez des formes de blob organiques et aléatoires en SVG propre avec un contrôle total sur la complexité, l'aléatoire, les couleurs et les remplissages en dégradé.

Générateur de Formes Floues SVG

Générateur de Formes Floues SVG

Créez des arrière-plans SVG flous et oniriques de style aurora avec contrôle de la palette et du flou.

Générateur de Vagues SVG

Générateur de Vagues SVG

Générez des formes de vagues SVG lisses et personnalisables pour des séparateurs de sections, arrière-plans hero et éléments décoratifs.

Texte vers PascalCase

Texte vers PascalCase

Convertissez du texte en PascalCase pour les noms de classes et identifiants.

Encodeur Base64

Encodeur Base64

Encodez du texte au format Base64.

Diviser PDF

Diviser PDF

Divisez un fichier PDF en pages individuelles ou en plages de pages.

apps

Plus d'outils

Parcourez notre collection complète d'outils en ligne gratuits.

Dégradés Mesh Rendus en SVG Pur

Les dégradés mesh — arrière-plans colorés multi-points qui ressemblent à de la peinture brossée — sont devenus iconiques grâce aux pages marketing de Stripe et Linear. Ce générateur produit le même effet sous forme d'un petit SVG autonome, sans image, WebGL, ni canvas.

La Technique

Au lieu d'utiliser un mesh gradient natif (CSS et SVG ne le supportent pas encore pleinement), l'outil empile plusieurs dégradés radiaux doux. Chaque dégradé s'estompe d'une couleur choisie depuis un point (x, y) précis vers la transparence. Empilés sur un fond uni, ces mares radiales se mélangent entre elles, imitant un mesh peint à la main.

L'approche est très portable : le SVG résultant n'utilise que des éléments standards <radialGradient> et <rect>, sans filtre ni script — il fonctionne donc partout où SVG est supporté.

Contrôles

  • Points — 2 à 6 taches de couleur. Chacune a sa propre couleur et ses curseurs X/Y.
  • Douceur — rayon de chaque dégradé radial. Faible douceur = couleurs serrées et percutantes ; forte douceur = pastels subtils.
  • Arrière-plan — couleur unie derrière les taches.
  • Relancer — randomise les positions pour trouver de l'inspiration tout en gardant votre palette.

Usages

  • Arrière-plans hero pour SaaS modernes
  • Écrans de lancement d'apps
  • Pochettes de podcast / musique
  • Maquettes produit et bannières marketing
  • Arrière-plans de blog et de docs

Le SVG s'étire à n'importe quel conteneur avec preserveAspectRatio="none", un seul fichier peut donc servir d'arrière-plan pleine largeur à n'importe quel breakpoint. Combinez-le avec les générateurs Dégradé Granuleux ou Texture de Bruit pour un rendu tactile et moderne.