Générateur de motifs CSS
Créez des motifs d'arrière-plan en pur CSS (points, pois, rayures, damier, grille, zigzag, quadrillage) avec couleurs, taille de tuile et épaisseur. Sans image.
Réglages du motif
Aperçu
background-color: #ffffff; background-image: radial-gradient(#6366f1 2px, transparent 2px); background-size: 20px 20px;
Outils Connexes
Voir ToutQu'est-ce que Générateur de motifs CSS ?
Génère des motifs d'arrière-plan répétitifs uniquement avec des dégradés CSS : aucun fichier image n'est nécessaire. Choisissez un motif, deux couleurs, la taille de la tuile et l'épaisseur des lignes ou des points, puis copiez les déclarations de fond obtenues.
Comment utiliser Générateur de motifs CSS
- Choisissez un Motif : Points, Pois, Rayures, Damier, Grille, Zigzag ou Grille en croix.
- Réglez la Couleur du motif et la Couleur de fond.
- Ajustez la Taille de la tuile et l'épaisseur (rayon des points, largeur des rayures ou épaisseur des lignes) et, pour les rayures, l'Angle.
- Vérifiez l'aperçu.
- Copiez le code CSS.
Exemple
Checkerboard, tile 40px, pattern #000000 on #ffffff
background-color: #ffffff; background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%); background-size: 40px 40px;
Quand utiliser Générateur de motifs CSS
Utilisez les motifs CSS pour des arrière-plans de page discrets, des éléments de remplacement, des effets de papier millimétré et des sections décoratives ; ils s'adaptent parfaitement à toutes les résolutions et ne coûtent aucune requête HTTP. Pour des motifs répétitifs complexes ou illustratifs, une tuile SVG est plus flexible.
Comment fonctionne Générateur de motifs CSS
Chaque motif est un background-color plus un ou plusieurs dégradés répétés par background-size. Les points utilisent radial-gradient(couleur r, transparent r) ; les pois ajoutent une seconde couche décalée via background-position. Les rayures utilisent repeating-linear-gradient avec des arrêts de couleur nets ; le damier utilise repeating-conic-gradient(color 0% 25%, transparent 0% 50%) ; les grilles combinent un dégradé linéaire horizontal et un vertical ; le zigzag est construit à partir de quatre triangles à 45°. L'épaisseur est limitée à la taille de la tuile.
Cas d'utilisation courants
- Fonds de papier millimétré pour éditeurs et diagrammes
- Fonds de bandeau discrètement pointillés
- Barres d'avertissement ou de progression rayées
- Damiers de transparence derrière des images
- Fonds de sections rétro en zigzag
Questions Fréquentes
Ces motifs fonctionnent-ils dans tous les navigateurs ?
Oui dans les navigateurs actuels. Le damier repose sur les dégradés coniques, pris en charge par tous les principaux navigateurs depuis 2020.
Puis-je utiliser un fond transparent ?
Oui, saisissez transparent ou une couleur rgba()/oklch() avec alpha comme Couleur de fond.
Pourquoi utiliser CSS plutôt qu'une image ?
Les motifs CSS sont indépendants de la résolution, minuscules et faciles à recolorer avec des variables, sans fichier supplémentaire à télécharger.