Générateur de motifs de fond
Créez des motifs de fond sans raccord visible : points, grille, rayures, damier, zigzag, vagues, triangles, plus, hexagones, cercles, losanges et briques. En CSS, SVG ou PNG.
Chargement de Générateur de motifs…
Vos fichiers ne quittent jamais votre appareil
Comment utiliser Générateur de motifs
- 1
Ouvrez Générateur de motifs sur cette page. Il se charge directement dans votre navigateur.
- 2
Ajoutez votre fichier, texte ou valeurs et ajustez les réglages.
- 3
Copiez ou téléchargez le résultat. Rien n'est envoyé ni stocké.
À propos de cet outil
Des motifs discrets ajoutent de la texture aux sections de site web, aux diapositives, aux maquettes et aux visuels pour les réseaux sociaux, sans le poids d'une photo. Ce générateur de motifs crée des fonds répétitifs sans raccord visible à partir de douze motifs classiques. Ajustez la taille, l'épaisseur, l'opacité et les couleurs, voyez la tuile se répéter en direct, puis copiez un fond CSS ou téléchargez le motif en image.
Motifs disponibles
Points, grille, rayures, damier, zigzag, vagues, triangles, signes plus, hexagones, cercles, losanges et briques.
Comment créer un motif
- Choisissez un style de motif, ou cliquez sur Random pour une surprise.
- Réglez la taille, l'épaisseur des traits et l'opacité.
- Choisissez les couleurs de premier plan et d'arrière-plan.
- Copiez le CSS background pour votre feuille de style, ou téléchargez une tuile SVG ou PNG.
Bien utiliser les motifs
- Gardez un contraste faible derrière le texte : un motif à quelques nuances du fond ajoute de la texture sans nuire à la lisibilité.
- Utilisez SVG ou CSS sur les sites web : les deux sont très légers et restent nets sur tous les écrans.
- Adaptez l'échelle au support : des motifs plus grands et plus marqués pour les affiches et les diapositives, plus fins pour les sections web.
- Combinez avec un dégradé en superposition pour estomper le motif vers les bords.
Idées
- Fonds de sections d'en-tête (hero) et de pied de page.
- Images d'en-tête de blog et miniatures YouTube.
- Diapositives de présentation et badges d'événement.
- Papier cadeau, autocollants et fonds imprimés (téléchargez un grand PNG ou un SVG).
Pour des formes uniques, essayez le générateur de blobs ; pour des fonds de couleur fondus, le générateur de dégradés CSS.
Questions fréquentes
Les motifs sont-ils sans raccord ?
Oui. Chaque motif est une tuile conçue pour se répéter sans raccord visible dans toutes les directions.
Comment utiliser un motif sur mon site web ?
Copiez le fond CSS et collez-le dans le style de n'importe quel élément, ou téléchargez le SVG et utilisez-le comme background-image.
Quels styles de motifs sont inclus ?
Points, grille, rayures, damier, zigzag, vagues, triangles, plus, hexagones, cercles, losanges et briques.
Puis-je télécharger le motif en image ?
Oui, en SVG pour un redimensionnement net ou en PNG pour les applications qui n'acceptent pas le SVG.
Puis-je utiliser les motifs à des fins commerciales ?
Oui. Les motifs que vous générez sont libres d'utilisation dans vos projets personnels et commerciaux.
Un motif va-t-il ralentir mon site ?
Non. Les motifs CSS et SVG ne pèsent que quelques centaines d'octets, bien moins qu'une photo en arrière-plan.