C& Color & Design

Générateur de dégradés mesh

Créez des dégradés mesh à partir de 3 à 6 points de couleur déplaçables, avec flou et bruit. Copiez le CSS ou téléchargez une image PNG.

🔒 S'exécute entièrement dans votre navigateur — rien n'est téléchargé

Drag the handles to move color points. Arrow keys nudge a focused handle.

Advertisement

Créez des dégradés mesh avec des points de couleur déplaçables

Les dégradés mesh fondent de nombreuses couleurs sur une surface en transitions douces et organiques. Ils sont devenus incontournables pour les arrière-plans d'accueil, les écrans de démarrage d'applications et les pochettes d'albums, car ils paraissent plus riches qu'un simple dégradé linéaire à deux couleurs. Ce générateur de dégradés mesh vous permet de placer entre trois et six points colorés directement sur la zone de dessin, de les faire glisser en position et de voir le mélange se mettre à jour instantanément.

Comment cela fonctionne en CSS pur

Les navigateurs ne prennent pas en charge de véritables dégradés mesh, mais vous pouvez les imiter en superposant plusieurs arrière-plans radial-gradient(). Chaque calque est centré sur l'un de vos points et passe de la couleur du point à une version entièrement transparente de cette même couleur, et tous les calques reposent sur une background-color de base. Les fondus qui se chevauchent mélangent les couleurs en douceur, ce qui produit l'effet mesh. Le CSS généré est une seule déclaration sans aucune image : il se charge donc instantanément et s'adapte à n'importe quelle taille d'élément.

Faire le fondu vers rgba() avec un alpha nul, plutôt que vers le mot-clé transparent, évite les franges grises qui peuvent apparaître dans certains moteurs de rendu, et permet aussi de reproduire exactement le même dégradé sur un canvas HTML pour l'export PNG.

Flou, bruit et palettes

Le curseur de flou ajoute un filter: blur() CSS pour un rendu encore plus doux, et le curseur de bruit superpose une texture SVG de bruit fractal qui apporte un grain subtil et réduit l'effet de bandes de couleur sur les grandes surfaces. Le bouton « Random palette » choisit un ensemble harmonieux de teintes à la saturation et à la luminosité équilibrées, et « Random layout » réorganise également les points. Une fois satisfait, copiez le CSS dans votre feuille de style ou téléchargez un PNG de 1600 × 900 pixels. Tout est généré localement dans votre navigateur et rien n'est envoyé.

Comment utiliser

  1. Placer les pointsChoisissez de 3 à 6 points de couleur et faites glisser chaque poignée pour la positionner sur la zone de dessin.
  2. Choisir les couleursModifiez la couleur de chaque point, définissez la couleur de base ou cliquez sur « Random palette » pour obtenir un ensemble harmonieux.
  3. Ajouter douceur et grainUtilisez les curseurs de flou et de bruit pour adoucir le mélange ou ajouter un léger grain de film.
  4. ExporterCopiez le CSS généré ou téléchargez le dégradé en image PNG.

Questions fréquemment posées

Comment crée-t-on un dégradé mesh en CSS ?
CSS ne propose pas de dégradé mesh natif. La technique habituelle consiste à empiler plusieurs calques radial-gradient(), chacun passant d'une couleur à transparent, au-dessus d'une couleur d'arrière-plan de base. C'est exactement ce que génère cet outil.
Pourquoi le réglage de flou ajoute-t-il une ligne filter ?
Le flou utilise la propriété CSS filter, qui floute l'élément entier. Appliquez-la à un calque d'arrière-plan placé dans un parent avec overflow: hidden, afin que le contenu au-dessus reste net.
Le PNG correspond-il à l'aperçu ?
Oui, il est rendu sur un canvas de 1600 × 900 pixels avec les mêmes dégradés. Le flou nécessite la prise en charge des filtres canvas, et le bruit est régénéré aléatoirement pour l'export.
Puis-je déplacer les points au clavier ?
Oui. Placez le focus sur une poignée et utilisez les touches fléchées, ou maintenez Maj enfoncée pour des pas plus grands.

Outils connexes

🌈

Générateur de dégradés CSS

Créez des dégradés CSS linéaires et radiaux avec plusieurs points de couleur, aperçu en direct et code CSS background prêt à copier.

CSS
 ▣

Générateur de Box Shadow

Créez des ombres CSS box-shadow avec curseurs de décalage, flou, étendue, couleur, opacité et mode inset, avec aperçu en direct dans votre navigateur.

CSS
 🖼️

Générateur de filtres CSS

Créez visuellement des effets CSS filter() avec des curseurs pour le flou, la luminosité, le contraste, les niveaux de gris, la rotation de teinte et plus.

CSS
 ◖

Générateur de Border Radius

Créez des valeurs CSS border-radius standard et elliptiques avec aperçu en direct et code CSS à copier, entièrement dans votre navigateur.

CSS
 🧊

Générateur de Glassmorphism

Créez le CSS de cartes en verre dépoli avec des réglages de flou, transparence, teinte, bordure et rayon, directement dans votre navigateur.

CSS
 ⬚

Générateur de Neumorphisme

Générez du CSS néomorphique soft UI avec ombres jumelées, couleur de surface, rayon et formes plates, concaves ou convexes, directement dans votre navigateur.

CSS
Advertisement