Tous les outils de couleur

Créez des motifs de fond SVG sans raccord parmi près de 2 000 modèles : couleurs, zoom, espacement et angle, puis copiez le CSS ou téléchargez un SVG ou PNG.

Gratuit

1Choisissez un motif

Votre titre ici

Voyez comment le motif se place derrière un vrai contenu.

Commencer
Motif

Parcourir par collection


À propos de Générateur de motifs

Le Générateur de motifs transforme près de 2 000 modèles prêts à l'emploi en fonds que vous pouvez régler et utiliser aussitôt. Parcourez 14 collections, des vagues, pois et pavages aux tartans, seigaiha japonais, étoiles islamiques, éventails Art déco, sprites en pixels et camouflages, et voyez chacun dans vos propres couleurs.

Chaque modèle est dessiné en vectoriel et se répète sans raccord visible, à tout zoom et sous tout angle. Modifiez jusqu'à six couleurs, le zoom, la position, l'espacement, l'épaisseur du trait et l'angle, transformez les formes pleines en contours, ou faites bouger le motif avec une animation en boucle. Les motifs génératifs, comme les cartes topographiques, les cellules de Voronoï et les tuiles de Truchet, créent une nouvelle variation à chaque clic.

Quand le résultat vous plaît, copiez-le en CSS, SCSS, configuration Tailwind, SVG intégré, data URI ou composant React, ou téléchargez un fichier SVG, PNG, JPG ou WebP jusqu'à 8000 pixels, y compris un élément seul pour votre propre répétition. Tout se passe dans votre navigateur : rien n'est envoyé et aucun compte n'est nécessaire.

Comment utiliser Générateur de motifs

  1. Choisissez un motif : cherchez par nom, ou filtrez par collection et nombre de couleurs.
  2. Choisissez les couleurs avec les sélecteurs, une palette prête à l'emploi ou « Nouvelle palette ».
  3. Réglez le zoom, la position, l'espacement, le trait et l'angle. Verrouillez les valeurs qui vous plaisent avant d'appuyer sur « Inspirez-moi ».
  4. Vérifiez le résultat avec les aperçus « Voir l'élément », « Sur une page » et « Dans un texte ».
  5. Copiez le code ou téléchargez le fichier, et utilisez « Copier le lien » pour retrouver ce motif précis plus tard.

Questions fréquentes

Oui. L'outil est gratuit, sans inscription et sans limite : chaque motif est dessiné dans votre navigateur, aucun fichier n'est donc envoyé à un serveur.

Oui. Vous pouvez utiliser les motifs exportés dans des travaux personnels et commerciaux, comme des sites web, des applications, des emballages et des impressions, sans attribution.

Non. Chaque forme qui dépasse le bord d'un élément est redessinée du côté opposé : la répétition est donc sans raccord. L'aperçu « Voir l'élément » montre exactement où un élément commence et finit.

Le CSS est le plus simple : collez la règle dans votre feuille de style et appliquez-la à n'importe quel élément. À 0, 90, 180 ou 270 degrés, il utilise un petit élément avec background-size ; aux autres angles, un SVG qui remplit l'élément. Les versions Tailwind, SCSS, React et data URI contiennent le même motif.

L'animation est intégrée au SVG : elle ne demande aucun script et fonctionne aussi en fond CSS dans les navigateurs modernes. Vérifiez-la dans les navigateurs que vous ciblez. Les fichiers PNG, JPG et WebP sont des images fixes : ils ne gardent que la première image.

Les modèles organiques, comme les camouflages et les cartes topographiques, contiennent beaucoup de courbes. La taille du code est affichée à côté du bouton de copie. S'il est trop lourd pour une page, choisissez un modèle à plus petit élément ou utilisez plutôt un élément PNG.

Oui, sur presque tous les motifs : activez « Fond transparent » et exportez en CSS, SVG, PNG ou WebP. Quelques modèles superposés masquent des formes avec la couleur de fond et exigent donc un fond uni. Les fichiers JPG ne gèrent pas la transparence.


Recherches populaires
générateur de motifs svg générateur de motifs sans raccord motif de fond css créateur de motifs répétitifs motifs de fond gratuits générateur de motifs géométriques motif de fond tailwind élément png sans raccord
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.
Signaler un problème

Ajoutez cet outil gratuit à votre propre site web : copiez-collez le code ci-dessous.