Softonic

Générateur de texture de bruit

Étape 1 / 2
Suivant

Une pincée de bruit masque le banding, adoucit les aplats de couleur et rend les dégradés de l’interface moins aseptisés. Ce générateur crée une texture de bruit carrée qui se répète sans coutures grâce au filtre SVG feTurbulence, avec des réglages pour la couleur de fond, l’opacité du bruit, la fréquence du grain et le type de bruit. Il vous rend un CSS déjà prêt : une couleur de fond et un data URI SVG en ligne, à coller directement dans votre feuille de styles.

Comment générer une texture de bruit

  1. 1

    Choisir la couleur de fond

    Le grain se superpose à cette couleur : partez donc de la surface que vous comptez réellement utiliser.

  2. 2

    Régler l'opacité

    De presque imperceptible (2-5%) à un grain de film marqué (25% et plus). Dans une interface, la sobriété l'emporte presque toujours.

  3. 3

    Ajuster la fréquence

    Une fréquence de base élevée donne un grain fin et dense ; une fréquence basse produit des taches plus larges et plus douces.

  4. 4

    Choisir le type de bruit

    Le bruit fractal est doux et naturel. La turbulence offre plus de contraste et un rendu nuageux.

  5. 5

    Copier le CSS

    La sortie est une couleur de fond et un data URI SVG en ligne, prêt à coller dans votre feuille de styles.

Bruit SVG avec feTurbulence

La façon la plus compacte de livrer du bruit, c’est SVG associé à un filtre de turbulence :

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

Intégrez-le en ligne sous la forme background-image: url("data:image/svg+xml,...") et vous obtenez quelques centaines d’octets de balisage qui se répètent sur n’importe quelle surface, sans requête HTTP supplémentaire.

Réglages recommandés selon l’usage

Cas d’usage Opacité Fréquence de base Type de bruit
Panneaux d’interface en mode sombre 3-5% 0,8-1,0 Bruit fractal
Calque sur le dégradé d’une section héros 5-10% 0,7-0,9 Bruit fractal
Carte à l’aspect papier 8-15% 0,6-0,8 Bruit fractal
Rendu photo avec grain argentique 15-25% 0,9-1,2 Bruit fractal
Grain d’affiche rétro 25-40% 0,4-0,6 Turbulence

Notes de performance

  • La turbulence SVG se passe du GPU dans la plupart des navigateurs. Elle fonctionne dans les fonds CSS et se redessine à faible coût.
  • Réutilisez une seule tuile. Le générateur produit une tuile de 200 x 200 avec stitchTiles="stitch" : elle se répète sans raccord visible sur un grand écran.
  • Évitez d’animer le bruit. feTurbulence s’anime mal sans modifier baseFrequency, et les performances s’effondrent lors des sessions longues.
  • Superposez le bruit aux dégradés. Un grain à 10% d’opacité posé sur un dégradé CSS donne une surface bien plus riche que le dégradé seul.

Questions fréquentes

Dès qu’un large aplat de couleur ou un dégradé paraît trop lisse. Les sections héros, les fonds de fenêtres modales et les panneaux d’interface sombres gagnent en profondeur avec 3 à 10% de bruit. Évitez-le sur les zones de texte, où il nuit à la lisibilité.

Dans le filtre feTurbulence de SVG, type="turbulence" produit la valeur absolue du bruit de Perlin (contraste plus élevé, rendu nuageux), tandis que type="fractalNoise" renvoie des valeurs signées (grain plus doux et plus naturel). Pour une interface, le bruit fractal est presque toujours le bon choix.

Non. Le générateur produit un data URI SVG en ligne de quelques centaines d’octets, intégré directement au CSS : aucun fichier image, aucune requête supplémentaire. Il s’adapte en outre à n’importe quelle surface sans rééchantillonnage.

Oui. Sur les écrans 8 bits par canal, les dégradés peuvent montrer des bandes visibles à faible contraste. Une couche de bruit de 2 à 3% applique un tramage à la transition et supprime le banding, aussi bien sur mobile que sur moniteur.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Compteur de FPS

Mesurez les FPS du navigateur avec requestAnimationFrame : lissage, fréquence d'images min et max, seuil d'alerte et graphique facultatif. Tout se passe en local, sans envoi ni API.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Générateur de flèches CSS

Créez localement une flèche CSS avec direction, couleur, taille et épaisseur de bordure, puis copiez la règle.

Outil disponible dans d’autres langues