Textures de grain sans couture pour interfaces (8 grains)

Ces textures s’adressent aux designers UI et aux développeurs front-end qui veulent ajouter du grain à un dégradé, un fond, une carte ou un en-tête, sans fabriquer un bruit à la main. C’est l’effet des dégradés texturés : un grain discret qui casse l’aspect lisse d’un aplat ou d’un dégradé. Chaque texture se répète sans joint visible : vous la posez en mosaïque sur une surface de n’importe quelle taille. Elle existe en deux versions. La tuile opaque sert de fond telle quelle ; le calque transparent se pose sur votre design, garde vos couleurs et n’ajoute que le grain.

• 8 textures de grain, du plus fin au plus épais.
  • Grains fins : grain-fine (grain fin), grain-fine-soft (grain fin adouci), grain-film (grain de pellicule) et grain-chroma (grain coloré, une variation par canal de couleur).
  • Grains épais : grain-medium (grain moyen), grain-coarse (grain épais), grain-sand (grain sableux, semé de particules sombres) et grain-speckle (particules sombres éparses sur un fond uni).
• 8 tuiles opaques (opaque/<nom>.jpg) : le grain sur un fond gris chaud neutre, en JPEG de 2 048 px de côté. Seule la tuile grain-chroma porte un grain coloré.
• 8 calques transparents (layer/<nom>.png), en PNG de 2 048 px de côté : blanc là où le grain éclaircit, noir là où il assombrit, la force portée par la transparence. La palette est fixe : du noir et du blanc seulement, 0 % de gris. Le calque grain-chroma reste lui aussi en noir et blanc.
• 16 tuiles web (web/), en WebP de 1 024 px : pour chaque texture, une version opaque (<nom>.webp) et une version en niveaux de gris (<nom>-overlay.webp), faite pour les modes de fusion du CSS.
• 1 feuille CSS (css/textures.css) : une variable et deux classes par texture.
• 1 page de démonstration (demo/index.html, en anglais), qui s’ouvre hors ligne : les 8 textures en tuiles nommées, puis un en-tête en dégradé et une carte, sans et avec grain.

Organisation de l’archive :

opaque/<nom>.jpg
layer/<nom>.png
web/<nom>.webp
web/<nom>-overlay.webp
css/textures.css
demo/index.html

Le zip contient aussi une note d’usage pour les outils de design, le texte de la licence, un fichier LISEZMOI et les crédits.

Comment l’utiliser

• Dans un outil de design : placez le calque layer/<nom>.png au-dessus de votre maquette, en remplissage d’image répété en mosaïque, en mode normal et à faible opacité. Pour un effet plus marqué, passez-le en mode incrustation ou lumière douce. La tuile opaque/<nom>.jpg sert de fond plein, pour une carte ou un arrière-plan.
• Sur le web : chargez css/textures.css, puis posez une classe sur l’élément. .tx-<nom> ajoute un voile de grain par-dessus le contenu existant, et la variable --tx-opacity en règle la force. .tx-bg-<nom> pose un fond complet, grain compris, dont la couleur ou le dégradé se règle par la variable --tx-fill.

<link rel="stylesheet" href="css/textures.css">
<section class="tx-grain-film">…</section>

Fabrication et IA

Les grains sont calculés par des scripts, à partir d’un bruit procédural : aucune image n’a été générée par un modèle d’image, et aucune image source n’entre dans la fabrication. Les scripts, la feuille CSS et la démonstration ont été produits avec un assistant d’IA, puis relus et contrôlés : dimensions, profil de couleur, poids des fichiers, absence de texte dans les images et raccord de chaque tuile.

• JPEG 2 048 px, sRGB : les tuiles opaques, avec un profil de couleur sRGB et sans autres métadonnées. Elles s’ouvrent dans la plupart des outils de design et de retouche.
• PNG 2 048 px transparent : les calques, utilisables dans la plupart des outils de design qui acceptent un remplissage d’image en mosaïque.
• WebP 1 024 px : les tuiles pour le web, lisibles par tout navigateur récent.
• CSS : la feuille de classes, sans script, sans dépendance et sans adresse externe.
• HTML : la page de démonstration, à ouvrir dans un navigateur, sans connexion.

À savoir

• Le calque grain-speckle est épars par nature : il ne porte que des particules noires, sur un fond entièrement transparent. Il se lit sur un fond clair ou moyen, mais reste sans effet sur un fond noir. Sa version web en niveaux de gris se lit, elle, sur un fond gris moyen.
• Les autres calques portent du noir et du blanc : ils fonctionnent sur n’importe quelle couleur de fond et ont tous la même force à opacité égale.
• Ce sont des textures à plat, pour l’interface et l’illustration. Aucune carte de relief ni de rugosité pour la 3D n’est livrée.
• Les textures ne contiennent ni texte ni marque.

Les textures sont livrées sous licence commerciale : vous pouvez les utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les produits que vous vendez, mais pas revendre ni redistribuer les fichiers, même gratuitement.

• Grainy gradient : des dégradés texturés et élégants
• Le dégradé maillé pour illustrer vos maquettes
• Les packs voisins de la même série, livrés dans les mêmes formats : textures de papier et de carton sans couture et textures de béton doux, d’enduit, de toile et de feutre sans couture.

1.0.0 (11 novembre 2026) : première version.