Aller au contenu
MagicWebBox
Connexion

Motifs de fond

Des fonds répétables en CSS ou SVG

Réglages

Motif

Aperçu

Code

Format de sortie
background-color: #fef2f2;
background-image: radial-gradient(circle, #b91c1c 3px, transparent 3.5px);
background-size: 24px 24px;

À propos de l'outil

Ce générateur crée des fonds répétables pour une section de page, une carte ou un en-tête, sans fichier image à héberger. Neuf motifs sont proposés : points, points décalés, quadrillage, rayures, damier, triangles, zigzag, vagues et croix. Vous réglez la taille du motif de 4 à 200 px, l'épaisseur du trait ou le rayon des points, l'angle pour les motifs qui s'y prêtent, ainsi que les couleurs et l'opacité du motif et du fond.

Le code est produit en dégradés CSS purs ou en SVG intégré sous forme de data URL. Le zigzag, les vagues et les croix n'ont pas d'équivalent fidèle en dégradés : ils passent automatiquement en SVG. Le résultat tient en quelques déclarations background à coller dans votre feuille de style, et le motif peut aussi être téléchargé en fichier SVG avec sa couleur de fond.

Comment l'utiliser

  1. Choisissez un « Motif » dans la grille.
  2. Réglez la « Taille », l'« Épaisseur » et, si le motif le permet, l'« Angle ».
  3. Choisissez la « Couleur du motif », la « Couleur de fond » et leur opacité, ou cliquez sur « Inverser les couleurs ».
  4. Sélectionnez le « Format de sortie » : « CSS (dégradés) » ou « SVG (data URL) ».
  5. Cliquez sur « Copier le CSS » ou sur « Télécharger le SVG ».

Questions fréquentes

Faut-il choisir les dégradés CSS ou le SVG ?

Les dégradés CSS donnent un code lisible et facile à modifier à la main, sans image. Le SVG en data URL reproduit plus fidèlement certains motifs et reste net. Pour le zigzag, les vagues et les croix, seul le SVG est proposé, même si vous choisissez CSS.

Que contient le code copié ?

Des déclarations prêtes à coller : background-color, background-image, et selon le motif background-size et background-position. Il suffit de les placer dans la règle CSS de l'élément à décorer. Aucun fichier externe n'est nécessaire, le SVG étant intégré dans la data URL.

Pourquoi un motif incliné ne se répète-t-il plus en carreaux ?

Quand un motif est tourné, le SVG utilise un pattern pivoté qui remplit toute la surface au lieu de répéter une petite tuile. La propriété background-size disparaît alors du code. En CSS, les rayures et le quadrillage gèrent l'angle directement dans le dégradé.

Comment obtenir un motif sur fond transparent ?

Réglez l'« Opacité du fond » à 0 % : la couleur de fond devient transparent et seul le motif est dessiné, par-dessus ce qui se trouve derrière l'élément. Vous pouvez aussi baisser l'opacité du motif pour une texture plus discrète.