Générateur de Dégradé Granuleux

Dégradés Granuleux Modernes Sans Photoshop

Le look "grainy gradient" — un dégradé doux saupoudré d'un grain filmique subtil — est partout dans le design moderne, des pages marketing de Linear à des dizaines de sites produits haut de gamme. Ce générateur produit cet effet sous forme d'un SVG compact et autonome qui s'adapte à n'importe quelle résolution, sans avoir besoin d'une seule image bitmap.

Comment le Grain est Appliqué

En interne, l'outil compose deux couches dans un même SVG. La couche de base est un <rect> rempli avec votre dégradé — linéaire ou radial, avec 2 à 5 arrêts. Par-dessus se trouve un second <rect> dont le remplissage est une texture de bruit monochrome générée par le filtre SVG <feTurbulence type="fractalNoise">. Le bruit est dessiné avec une opacité contrôlable, ce qui donne ce rendu "poussiéreux" délicat.

Comme tout passe par des filtres SVG, le motif de grain reste net et non répétitif à n'importe quelle taille — contrairement à un PNG en mosaïque, vous ne verrez pas de coutures évidentes si l'arrière-plan est étiré sur une grande zone hero.

Contrôles

• Type — linéaire (avec angle ajustable) ou radial.
• Arrêts de couleur — 2 à 5 couleurs avec curseurs de position pour contrôler précisément la transition.
• Intensité du grain — opacité de la couche de bruit. 0 désactive le grain ; valeurs plus élevées = plus de texture.
• Échelle du grain — baseFrequency de la turbulence. Faible échelle = grain épais et tactile ; forte = bruit fin façon pellicule.
• Octaves — nombre de couches de bruit empilées. Plus il y en a, plus il y a de détails.
• Graine — entier pour la reproductibilité. Même graine = même motif de grain.

Où l'Utiliser

• Arrière-plans hero qui ont l'air tactiles plutôt que stériles
• Écrans de lancement d'apps et cartes widget iOS
• Bannières de lancement façon Product Hunt
• Pochettes de musique et podcasts
• Cartes de dashboard avec une profondeur subtile

La sortie SVG est toujours plus nette qu'un JPG de taille équivalente, et ses filtres sont accélérés par GPU sur tous les navigateurs modernes. Copiez le code, collez-le dans un <div> et agrandissez-le où vous voulez — le grain reste fidèle sur tous les appareils et niveaux de zoom.