Générateur de motifs CSS en arrière-plan

Comment ça marche

Écrivez deux couleurs dans le panneau de gauche : la première ligne donne la couleur des bandes ou des points, la deuxième celle du fond. Avec une seule ligne, le fond est blanc par défaut. Les notations HEX, RGB et HSL sont toutes reconnues. Choisissez ensuite le motif et réglez le pas : le pas indique tous les combien de pixels le motif se répète — avec un pas de 16 pixels, un motif rayé aligne une bande colorée de 16 pixels et un vide de 16 pixels, donc le dessin recommence tous les 32 pixels. Collez le CSS obtenu tel quel dans votre feuille de style ; le nom de la classe se change librement. Les deux carrés sous le résultat portent les mêmes valeurs HEX que le CSS, pour ne pas confondre la couleur du motif et celle du fond. Le résultat n'est pas un fichier image mais un dégradé que le navigateur dessine lui-même : il reste net à tout niveau de zoom et n'ajoute aucune requête à la page.

Cet outil est aussi connu sous le nom de damier css, css background pattern, motif css sans image.

Qu'est-ce que repeating-linear-gradient ?

repeating-linear-gradient est la fonction CSS qui prend la transition de couleurs définie entre deux points et la répète sans fin. Un linear-gradient ordinaire étire sa dernière couleur sur tout l'espace restant, tandis que la version répétée recommence après le dernier arrêt — c'est ce qui permet d'écrire un motif rayé ou diagonal en une seule ligne. Pour obtenir un bord net au lieu d'un fondu, on place la fin d'une couleur et le début de la suivante sur le même pixel ; le dégradé se lit alors comme une frontière franche entre deux bandes.

Qu'est-ce que background-size ?

background-size fixe la taille de la boîte dans laquelle une couche d'arrière-plan est peinte ; c'est la propriété qui fait le vrai travail de pavage dans un motif. Un radial-gradient seul ne dessine qu'un point ; placez ce dessin dans une boîte de 16 pixels sur 16 et laissez-la se répéter sur la surface, et un motif de pois régulier apparaît. Quand plusieurs couches d'arrière-plan sont empilées, les valeurs s'écrivent séparées par des virgules dans l'ordre des couches, et une liste trop courte est relue depuis le début.

Qu'est-ce que conic-gradient ?

conic-gradient répartit ses arrêts de couleur en tournant autour d'un centre ; il fait sur un angle ce que linear-gradient fait le long d'une droite et radial-gradient du centre vers l'extérieur. Un rendu de camembert, une roue chromatique ou un damier peuvent s'écrire avec lui en une seule ligne. Cet outil construit pourtant son damier avec deux couches de linear-gradient : la version conique, plus courte, ne fonctionne que dans les navigateurs récents, et le code produit ici doit pouvoir se coller partout sans risque.

Quelle différence entre un motif en dégradé et un PNG répétable ?

Un PNG répétable est une petite image dessinée à l'avance et tamponnée en boucle sur la surface : il coûte un téléchargement de plus au navigateur, devient flou sur les écrans à haute densité, et changer sa couleur oblige à régénérer le fichier. Le motif en dégradé vit dans la feuille de style comme une simple règle et le navigateur le dessine à la volée ; il est net à toutes les résolutions, sa couleur et son pas se modifient en une ligne, et il n'ajoute aucune requête. Le PNG garde l'avantage sur un seul terrain : les textures irrégulières et organiques. Une fibre de papier ou un grain de bruit ne s'écrivent pas raisonnablement en dégradé.

Pourquoi dessiner le motif au dégradé plutôt qu'en PNG ?

Un PNG répétable est un fichier de plus que la page doit télécharger ; il devient flou sur les écrans à haute densité et changer sa couleur oblige à régénérer l'image. Rien de tout cela avec un dégradé : changer une couleur est une modification d'une ligne, et le dessin reste net à toutes les résolutions.

Le seul point de vigilance est le moiré qui apparaît aux très petits pas. En dessous de 4 à 6 pixels, le lissage des bords par le navigateur peut créer un léger scintillement, visible surtout pendant le défilement. Pour un motif dense, rester à 8 pixels ou plus est le choix sûr.

Quel motif pour quel usage ?

Un motif d'arrière-plan ne doit pas gêner la lecture du contenu ; c'est pourquoi l'écart entre la couleur du motif et celle du fond est en général volontairement faible.

• Rayures → bandes de séparation, panneaux d'état vide
• Rayures diagonales → marquage classique des zones désactivées, brouillon ou réservées
• Damier → l'indicateur de transparence connu des éditeurs d'images
• Pois → fond de page légèrement texturé, arrière de carte
• Grille → toile de dessin, plan de mise en page, fond de maquette

Questions fréquentes

Où coller le CSS généré ?

Ajoutez-le tel quel à votre feuille de style et donnez la classe du motif à l'élément voulu. Renommer la classe ne pose aucun problème ; tant que les déclarations à l'intérieur restent intactes, le motif ne change pas.

Que change exactement le pas du motif ?

L'intervalle de répétition. Dans les rayures droites et diagonales, le pas est l'épaisseur d'une bande ; dans les pois et la grille, la distance entre deux centres ; dans le damier, le côté d'un carré.

Ces motifs fonctionnent-ils dans les anciens navigateurs ?

Oui. Le résultat utilise la notation classique à quatre arrêts de couleur plutôt que l'écriture abrégée récente, et repeating-linear-gradient, radial-gradient et background-size sont pris en charge depuis des années par tous les navigateurs courants.

Puis-je télécharger le motif comme image ?

Cet outil produit du CSS, pas une image ; le fichier téléchargé porte l'extension .css. Si la destination ne gère pas les dégradés CSS — un modèle d'e-mail HTML par exemple — il vous faudra préparer un PNG répétable.