Comment utiliser : Générateur de motifs SVG
- Choisissez un motif : points, grille, lignes, zigzag, vagues, croix, damier, cercles, triangles, hachures croisées, losanges ou rayures.
- Définissez la taille de la tuile, l'épaisseur du trait et l'opacité ; une opacité faible donne des textures discrètes.
- Choisissez les couleurs du motif et de l'arrière-plan, ou un fond transparent pour le superposer à votre propre couleur ou dégradé.
- Copiez le CSS (le SVG est intégré sous forme de data URI) ou téléchargez la tuile au format SVG.
Pourquoi utiliser des motifs SVG ?
Une tuile de motif est un petit SVG — généralement moins de 300 octets — que le navigateur répète avec background-repeat. Il reste net à tous les niveaux de zoom et sur les écrans retina, ne nécessite aucune requête supplémentaire lorsqu'il est intégré en data URI, et change de couleur instantanément en modifiant deux valeurs.
.hero {
background-color: #0f172a;
background-image: url("data:image/svg+xml,…");
background-size: 24px 24px;
}Les motifs sont conçus pour que leurs bords s'alignent parfaitement lors de la répétition. Pour superposer un motif à un dégradé, cochez Fond transparent et listez les deux images : background-image: url(…pattern…), linear-gradient(…). Pour les séparateurs de section, consultez le générateur de vagues SVG et le générateur de séparateurs de section.
Aussi recherché comme : générateur de motif svg, motif css arrière-plan, générateur de motifs sans couture, générateur de fond svg, motif de points css, motif de grille css, motif hero svg, fond discret css.
Outils complémentaires : Générateur de motifs SVG
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Générateur de blobs SVG — Créez des formes organiques lisses pour les arrière-plans de bannière, les avatars et les illustrations.
- Convertisseur SVG vers CSS — Collez un SVG pour obtenir une data URI compacte encodée en URL, ainsi que les règles CSS prêtes à l’emploi background-image et mask-image recolorable.
- Générateur de glassmorphism — Concevez une carte en verre dépoli avec des curseurs en direct et copiez un CSS compatible avec tous les navigateurs, avec le préfixe -webkit-backdrop-filter et une solution de repli pour les anciens navigateurs.