Design / CSS

Générateur de motifs CSS (rayures, points, grille, damier)

Créez des motifs d’arrière-plan répétitifs uniquement avec des dégradés CSS : rayures, rayures diagonales, lignes de grille, pois, damier et zigzag. Choisissez vos deux couleurs, la taille, l’épaisseur des lignes, puis copiez le CSS.

Générateur de motifs CSS (rayures, points, grille, damier): Chaque motif utilise un ou deux dégradés CSS qui se répètent selon la taille choisie : repeating-linear-gradient pour les rayures, deux dégradés linéaires qui se croisent pour une grille, radial-gradient pour les points et repeating-conic-gradient pour un damier. Aucun fichier image n’est utilisé : le motif reste net quel que soit le niveau de zoom et son chargement ne coûte rien. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie
Outils développeur
Exécutions
Dans votre navigateur
Coût
Gratuit · sans inscription
Disponibilité
Prêt à l'emploi
Générateur de motifs CSSTraitement local

Fonctionne entièrement dans votre navigateur

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

Chaque motif est créé uniquement avec des dégradés CSS : il n’y a donc aucune image à télécharger, il reste net quel que soit le niveau de zoom et ses couleurs peuvent être modifiées dans la feuille de style. Si le motif se trouve derrière du texte, préférez la discrétion : un faible contraste entre les deux couleurs permet de garder le texte lisible.

Comment est dessiné un damier

repeating-conic-gradient(#000 0 25%, transparent 0 50%) peint les premier et troisième quarts d’un tour autour du centre de chaque tuile, ce qui crée deux carrés en diagonale par tuile ; background-size définit la tuile à deux fois la taille du carré.

Combiner des motifs

Les images d’arrière-plan se superposent : ajoutez un dégradé du générateur de dégradés CSS après un motif, en les séparant par une virgule, et le motif se placera au-dessus du dégradé.

Comment l'utiliser

  1. Choisissez un motif.
  2. Sélectionnez les deux couleurs, la taille de répétition et l’épaisseur des lignes ou la taille des points.
  3. Copiez le CSS.

Confidentialité et limitations

Tout s’exécute dans votre navigateur.

Outils associés

Dégradé CSSVague SVGGlassmorphism

Questions fréquentes

Les motifs fonctionnent-ils dans tous les navigateurs ?

Oui : tous les navigateurs actuels prennent en charge ces dégradés, y compris le dégradé conique utilisé pour le damier.

Comment placer un motif derrière du texte ?

Choisissez deux couleurs proches afin que le motif reste discret et que le texte conserve un contraste suffisant.

Puis-je modifier l’angle des rayures ?

Oui : modifiez l’angle dans repeating-linear-gradient dans le CSS copié, par exemple 60deg au lieu de 45deg.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis