Générateur de Patterns CSS
Générez des patterns CSS pour arrière-plans instantanément. Choisissez points, lignes, grille, damier ou diagonal — copiez le CSS et utilisez-le partout.
① Choisissez un type de pattern ② Ajustez taille et couleurs ③ Copiez le CSS généré
Couleur du pattern
#C9B89A
Couleur d'arrière-plan
#0E0E0E
Comment ça marche
Chaque pattern est construit avec des dégradés CSS purs — pas d'images, pas de SVG. Les points utilisent radial-gradient, lignes et diagonal utilisent repeating-linear-gradient, la grille utilise deux linear-gradients croisés, et le damier utilise conic-gradient.
Contrôle de taille
Le curseur Taille définit le tile background-size. Des tiles plus grands créent un pattern plus aéré ; des tiles plus petits créent une texture plus dense.
CSS seulement
Le CSS généré utilise uniquement background-image et background-size, le rendant compatible avec tout élément HTML et tous les navigateurs modernes.
background-color: #0e0e0e;
background-image: radial-gradient(circle, #c9b89a 5px, transparent 5px);
background-size: 20px 20px;
Qu'est-ce qu'un pattern CSS d'arrière-plan ?
Les patterns CSS d'arrière-plan sont des textures visuelles répétitives créées entièrement avec des dégradés CSS — aucune image requise. En utilisant radial-gradient, linear-gradient et conic-gradient, vous pouvez produire des points, lignes, grilles, damiers et rayures diagonales qui se répètent sans couture. Cette technique est supportée dans tous les navigateurs modernes et ne génère aucune requête HTTP supplémentaire.
Questions fréquentes
Un pattern CSS d'arrière-plan est une texture visive répétitive générée entièrement avec des fonctions dégradé CSS — aucune image ou SVG requis. En combinant radial-gradient, linear-gradient, repeating-linear-gradient et conic-gradient avec background-size, vous créez des points, lignes, grilles, damiers et rayures diagonales sans couture.
Le pattern de points utilise radial-gradient pour dessiner un petit cercle rempli au centre de chaque tile, avec un remplissage transparent pour le reste. En définissant background-size aux dimensions du tile, les points se répètent en une grille régulière.
Le pattern lignes utilise un seul repeating-linear-gradient dans une direction, créant des lignes horizontales parallèles. Le pattern grille utilise deux linear-gradients perpendiculaires superposés, créant une grille croisée avec des lignes dans les deux directions.
La fonction conic-gradient crée une rotation en quatre quarts où les quarts alternés sont remplis avec la couleur du pattern ou de l'arrière-plan. En définissant background-size au double de la taille du tile, les quatre quarts forment un damier parfait.
Tous les cinq patterns utilisent des fonctions dégradé supportées dans tous les navigateurs modernes. Le conic-gradient utilisé pour le damier nécessite Chrome 69+, Firefox 83+ et Safari 12.1+. Tous les autres patterns fonctionnent dans les navigateurs depuis 2015.
Copiez le CSS généré et appliquez-le à tout élément HTML. Vous pouvez l'ajouter en ligne via l'attribut style ou dans une classe CSS. Pour un arrière-plan pleine page, appliquez-le à body ou un div fixe.
L'outil supporte 5 types de patterns : points, lignes, grille, damier et diagonal. Chacun est configurable avec une taille de tile arbitraire (4–40px) et des couleurs entièrement personnalisées.