Noise Texture Generator
Générez des textures de bruit et grain SVG comme patterns CSS. Répétables, CSS pur, aucune image requise.
① Choisissez le type et la fréquence ② Ajustez octaves et opacité ③ Copiez le CSS
#1A1714
.noise-bg {
background-color: #1a1714;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'noise'%3E%3CfeTurbulence%20type%3D'turbulence'%20baseFrequency%3D'0.65'%20numOctaves%3D'4'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'200'%20height%3D'200'%20filter%3D'url(%23noise)'%20opacity%3D'0.30'%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;
background-size: 200px 200px;
}Que sont les textures de bruit SVG et comment les utiliser en CSS?
Les textures de bruit SVG sont des patterns générés procéduralement avec le filtre SVG feTurbulence. Elles s'intègrent comme URI data: directement en CSS. baseFrequency contrôle la granularité. Le type turbulence crée un bruit nuageux, tandis que fractalNoise génère des patterns de grain plus doux et organiques.
Questions fréquentes
feTurbulence est une primitive de filtre SVG qui génère du bruit procédural en utilisant l'algorithme de Perlin. Deux types: turbulence (nuageux) et fractalNoise (plus doux, organique).
baseFrequency contrôle l'échelle du pattern de bruit. Valeurs basses (0.50–0.65) = bruit grossier et lisse. Valeurs hautes (0.80–0.90) = grain fin, similaire au grain photographique.
Bruit: turbulence avec fréquence standard. Grain: fractalNoise — plus lisse, organique. Gravier: turbulence à fréquence plus haute (1.5x) — texture plus granuleuse.
Chaque octave ajoute une couche de détails à fréquence plus haute. 1 octave = bruit simple. 3–4 octaves = texture naturelle. 5 octaves = grain très détaillé.
Oui. L'attribut stitchTiles='stitch' dans le filtre SVG permet de répéter le pattern sans coutures visibles.
Les data URI SVG sont traités par le GPU, donc généralement légers. Pour de meilleures performances, utilisez le bruit comme background-image statique.
Appliquez le bruit comme deuxième couche background-image: background-image: url('data:...'), linear-gradient(...).