Générateur de Motifs de Fond CSS

Cet outil génère des motifs de fond répétitifs en utilisant uniquement des dégradés CSS — aucun fichier image requis. Choisissez des pois, des rayures diagonales, un damier ou des lignes de grille, ajustez les couleurs et l'espacement, et copiez le CSS background-image directement dans votre feuille de style.

En quoi consiste cet outil ?

CSS peut dessiner des motifs répétitifs sans aucun fichier image en utilisant des dégradés — radial-gradient() et linear-gradient() — comme background-image, combinés à un background-size plus petit que l'élément pour que le dégradé se répète en mosaïque. Les pois utilisent un repeating-radial-gradient, les rayures et damiers utilisent du linear-gradient() répété ou superposé, et les lignes de grille utilisent deux linear-gradient() superposés.

Cet outil construit ces déclarations de dégradé pour vous. Choisissez un type de motif, ajustez la couleur du motif, la couleur de fond et l'espacement, et regardez l'aperçu en direct se mettre à jour — puis copiez le CSS exact de background-image et background-size.

Source : CSS Images Module Level 3, W3C — définit repeating-linear-gradient() et repeating-radial-gradient(), les fonctions à partir desquelles ces motifs sont construits.

Pourquoi l'utiliser ?

Aucun fichier image, aucune requête HTTP — le motif est du CSS pur et s'affiche instantanément à n'importe quelle résolution, y compris sur les écrans rétina/haute densité.
Couleur et espacement entièrement ajustables sans écrire à la main la syntaxe des dégradés ni calculer les maths du mosaïquage.
L'aperçu en direct montre le motif répétitif exact avant de copier quoi que ce soit.
S'adapte parfaitement puisqu'il s'agit de calcul vectoriel et non d'une image raster — aucun flou lorsque l'élément change de taille.
Fonctionne entièrement dans votre navigateur — rien de ce que vous configurez n'est envoyé où que ce soit.
Gratuit, sans inscription, fonctionne sur mobile.

Mode d'emploi

Choisissez un type de motif : pois, rayures diagonales, damier ou lignes de grille.
Sélectionnez la couleur du motif et la couleur de fond qui apparaît entre/derrière les formes du motif.
Ajustez le curseur de taille pour agrandir ou réduire les points, rayures ou cellules de la grille — cela contrôle aussi la densité de répétition du motif.
Copiez le CSS généré et collez-le en tant que background-image (et background-size/background-position lorsqu'affichés) de n'importe quel élément.

Exemple

Entrée

Motif : pois · Couleur : bleu · Fond : blanc · Taille : 24px

Résultat

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Un motif classique de pois clairs, souvent utilisé comme fond discret de section ou texture de carte.

Comment chaque motif est construit

Pois : un radial-gradient() dessine un petit cercle plein, puis background-size le répète en mosaïque de points.
Rayures diagonales : un repeating-linear-gradient() à 45 degrés alterne entre la couleur du motif et la couleur de fond à intervalle fixe.
Damier : deux couches superposées de linear-gradient() à 45 degrés, décalées l'une de l'autre d'un demi-carreau, produisent des carrés clairs/foncés alternés.
Lignes de grille : deux fines lignes linear-gradient() — une horizontale, une verticale — répétées en mosaïque selon l'espacement choisi pour former une grille, semblable à du papier millimétré.

Quand utiliser des motifs CSS plutôt que des fichiers image

Un motif en dégradé CSS n'a ni taille de fichier ni requête HTTP, il se charge donc instantanément et ne paraît jamais flou sur les écrans haute densité, contrairement à une tuile de fond PNG raster. C'est idéal pour des textures subtiles derrière du texte, des séparateurs de section, des illustrations d'états vides ou des cartes de remplacement. Pour des motifs illustrés ou photographiques complexes, une vraie image reste le bon outil — les dégradés CSS conviennent mieux aux formes simples, géométriques et répétitives comme celles-ci.

À associer avec d'autres effets CSS

Les motifs fonctionnent bien comme arrière-plan derrière des cartes en glassmorphism, car le flou a besoin de quelque chose avec une texture visuelle derrière lui pour être visible. Ils s'associent aussi naturellement avec des coins arrondis sur l'élément conteneur.

→ Générateur de Glassmorphism CSS · Générateur de Border Radius

Foire aux questions

Ces motifs nécessitent-ils des fichiers image ?

Non. Chaque motif ici est généré purement avec des dégradés CSS en tant que background-image — aucun PNG, SVG ou autre fichier n'est impliqué, donc aucune requête HTTP supplémentaire et aucun risque de flou sur les écrans haute résolution.

Puis-je changer la taille du motif ?

Oui — le curseur de taille contrôle le background-size, qui définit la taille d'une tuile répétée du motif. Une taille plus petite rapproche les points, rayures ou cellules de la grille ; une taille plus grande les espace.

Pourquoi le motif de damier utilise-t-il deux dégradés ?

Un seul linear-gradient() ne peut alterner les couleurs que dans une seule direction. Superposer deux dégradés à 45 degrés, décalés l'un de l'autre d'un demi-carreau, produit les carrés clairs/foncés alternés d'un damier — c'est la technique standard pour les damiers en CSS pur.

Ce motif sera-t-il net sur les écrans rétina/haute densité ?

Oui. Comme le motif est un dégradé mathématique plutôt qu'une image bitmap, il est rendu à la résolution dont l'écran a besoin, sans mise à l'échelle ni flou — contrairement à une petite tuile d'image raster étirée ou répétée à haute densité de pixels.

Puis-je utiliser ces motifs comme fond de page entière ?

Oui — appliquez le background-image, background-size et background-position (le cas échéant) générés au body ou à tout élément conteneur pleine largeur. Gardez le contraste à l'esprit : un motif chargé et très contrasté derrière le texte du corps peut nuire à la lisibilité, donc des réglages plus clairs/subtils fonctionnent généralement mieux pour les grandes zones de fond.