Générateur de motifs de fond CSS - Rayures, points, grille et plus gratuit

Générez des motifs de fond CSS incluant rayures, points, damier, diagonales, grille et zigzag avec des couleurs et taille personnalisées

Outils CSS

Tool

Pattern

Color 1

#6366f1

Color 2

#1e293b

Size (20px)

CSS

background-image: repeating-linear-gradient(0deg, #6366f1 0px, #6366f1 10px, #1e293b 10px, #1e293b 20px);
background-size: 20px 20px;

Comment utiliser

1Cliquez sur l'un des 6 modèles prédéfinis (rayures, points, damier, diagonales, grille, zigzag)
2Choisissez vos deux couleurs à l'aide des sélecteurs de couleur
3Ajustez le curseur de taille pour contrôler la densité du motif
4Copiez les propriétés de fond CSS générées dans votre feuille de styles

Questions fréquentes

Les motifs de fond CSS utilisent les fonctions repeating-linear-gradient et radial-gradient pour disposer des formes géométriques en mosaïque. Aucune image n'est nécessaire — tout est du CSS pur.

Oui. Les fonctions de dégradé utilisées sont prises en charge dans tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge.

Le générateur utilise des couleurs hexadécimales. Pour les effets de transparence, vous pouvez modifier manuellement le CSS copié pour utiliser rgba() ou des couleurs hexadécimales avec un canal alpha.

Le curseur de taille contrôle le backgroundSize, qui détermine la taille de chaque mosaïque répétitive. Des valeurs plus petites créent un motif plus dense ; des valeurs plus grandes espacent davantage le motif.

Comment utiliser

1Cliquez sur l'un des 6 modèles prédéfinis (rayures, points, damier, diagonales, grille, zigzag)

2Choisissez vos deux couleurs à l'aide des sélecteurs de couleur

3Ajustez le curseur de taille pour contrôler la densité du motif

4Copiez les propriétés de fond CSS générées dans votre feuille de styles

Questions fréquentes

Oui. Les fonctions de dégradé utilisées sont prises en charge dans tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge.