Générateur de Motifs

Motifs de fond CSS/SVG géométriques et organiques.

Style de motif

PointsGrilleRayuresVagues

Couleur du motif

Couleur d'arrière-plan

Taille du motif40px

Rayon du point4px

Opacité du motif30%

Rendu de motif en temps réel utilisant des SVG intégrés très efficaces. Responsive et parfaitement aligné.

Code d'arrière-plan CSS

background-image: url("data:image/svg+xml;base64,");
background-color: #0f0f11;

Code XML SVG brut

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <circle cx="20" cy="20" r="4" fill="#ff6b35" fill-opacity="0.3" />
</svg>

Comment ça marche

Les motifs sont générés procéduralement et se carrellent sans raccord ; les textures irrégulières dessinées à la main sont hors de son périmètre.
Les motifs très denses augmentent la taille du SVG, gardez une densité modérée pour des arrière-plans légers.

Oui, ils se carrellent sans coutures visibles, ils peuvent donc remplir proprement un arrière-plan de n'importe quelle taille.

Le CSS inline est le plus rapide pour un arrière-plan web ; le SVG brut vous donne un fichier autonome à modifier ou réutiliser ailleurs.

Non. Les motifs sont générés entièrement dans votre navigateur.