Générateur de motifs CSS
Créez des motifs de fond en CSS pur : points, quadrillage, lignes, diagonales, damier, zigzag, croix, losanges. Couleurs et tailles réglables, sans image.
- Gratuit
- Sans inscription
- Aucun fichier envoyé
- Windows, Mac, Android, iPhone
Chargement de l'outil…
À propos de cet outil
Habillez vos fonds avec des motifs géométriques en CSS pur : pois, quadrillage façon papier millimétré, lignes de cahier, rayures diagonales, damier, zigzag, croix et losanges. Réglez les deux couleurs, la taille et l'épaisseur, puis copiez le code : aucune image à héberger.
Dans quels cas l'utiliser ?
Fonds de sections
Un quadrillage très clair ou des pois discrets donnent du caractère à un fond sans gêner la lecture.
Zones de dépôt et états vides
Des rayures diagonales signalent une zone de glisser-déposer ou un emplacement vide.
Maquettes et présentations
Un motif léger évite les fonds blancs trop vides dans une maquette.
Mode d'emploi
- Choisissez un motif.
- Réglez les couleurs, la taille et l'épaisseur.
- Copiez le code CSS du fond.
Comment ça marche
Chaque motif est composé d'un ou plusieurs dégradés dont les couleurs changent d'un coup (sans transition), ce qui dessine des formes nettes. background-size fixe la taille de la tuile qui se répète.
L'aperçu applique exactement le code produit ; les vignettes de choix sont rendues avec vos couleurs.
Conseils pour un bon résultat
- Gardez un contraste faible entre les deux couleurs pour un fond derrière du texte.
- Une taille de 16 à 32 px convient à la plupart des fonds.
- Évitez les motifs serrés à fort contraste : ils peuvent créer un effet de moiré.
- Combinez un motif avec un dégradé transparent pour le faire disparaître progressivement.
Problèmes fréquents et solutions
Le motif tremble au défilement
Des motifs fins à fort contraste créent un moiré : augmentez la taille ou baissez le contraste.
Les lignes sont floues
Avec une épaisseur fractionnaire ou un zoom, les bords s'adoucissent. Utilisez des épaisseurs entières.
Le motif ne couvre pas tout le bloc
Vérifiez que l'élément a une hauteur : un bloc vide de hauteur 0 ne montre rien.
Questions fréquentes
Pourquoi des motifs en CSS plutôt qu'en image ?
Ils ne demandent aucun fichier à charger, restent nets sur tous les écrans et se modifient en changeant deux couleurs dans le code.
Comment sont-ils faits ?
Avec des dégradés CSS (linear-gradient, radial-gradient, conic-gradient) aux transitions nettes, répétés grâce à background-size.
Puis-je les combiner avec une couleur de fond ?
Oui, la couleur de fond fait partie du code. Le motif peut aussi être posé sur une image en ajoutant une couche à background-image.
Fonctionnent-ils partout ?
Oui, sur tous les navigateurs récents ; le damier utilise conic-gradient, présent partout depuis 2020.
Recherches associées
Toujours bloqué ?
Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.