Générateur de motifs

Créez des motifs de fond en CSS ou SVG, qui se répètent sans raccord.

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 de façon procédurale et se répètent sans raccord ; les textures irrégulières dessinées à la main n'en font pas partie.
Les motifs très denses alourdissent le SVG. Gardez une densité modérée pour des fonds légers.

Oui, ils se répètent sans couture visible, et peuvent donc remplir proprement un fond de n'importe quelle taille.

Le CSS intégré est le plus rapide pour un fond web ; le SVG brut donne une ressource autonome que vous pouvez modifier ou réutiliser ailleurs.

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