Seamless grain textures for interfaces (8 grains)

These textures are for UI designers and front-end developers who want to add grain to a gradient, a background, a card or a header, without building noise by hand. It is the grainy gradient effect: a subtle grain that breaks the smooth look of a flat fill or a gradient. Each texture repeats with no visible seam: you tile it over a surface of any size. It comes in two versions. The opaque tile works as a background on its own; the transparent layer goes over your design, keeps your colours and only adds the grain.

• 8 grain textures, from the finest to the coarsest.
  • Fine grains: grain-fine, grain-fine-soft (softened fine grain), grain-film (film grain) and grain-chroma (colour grain, one variation per colour channel).
  • Coarse grains: grain-medium, grain-coarse, grain-sand (sandy grain, scattered with dark particles) and grain-speckle (sparse dark particles on a plain background).
• 8 opaque tiles (opaque/<name>.jpg): the grain on a neutral warm grey background, as 2,048 px square JPEGs. Only the grain-chroma tile carries a coloured grain.
• 8 transparent layers (layer/<name>.png), as 2,048 px square PNGs: white where the grain lightens, black where it darkens, with the strength carried by transparency. The palette is fixed: black and white only, 0 % grey. The grain-chroma layer is black and white as well.
• 16 web tiles (web/), as 1,024 px WebP: for each texture, an opaque version (<name>.webp) and a greyscale version (<name>-overlay.webp) made for CSS blend modes.
• 1 CSS file (css/textures.css): one variable and two classes per texture.
• 1 demo page (demo/index.html) that works offline: the 8 textures as named tiles, then a gradient header and a card, without and with grain.

Archive layout:

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

The zip also holds a usage note for design tools, the licence text, a README file and the credits.

How to use it

• In a design tool: place the layer/<name>.png layer above your mockup as a tiled image fill, in normal blend mode at low opacity. For a stronger effect, switch it to overlay or soft light. The opaque/<name>.jpg tile is a solid background, for a card or a backdrop.
• On the web: load css/textures.css, then put a class on the element. .tx-<name> adds a veil of grain over the existing content, and the --tx-opacity variable sets its strength. .tx-bg-<name> sets a full background, grain included, whose colour or gradient is set by the --tx-fill variable.

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

Production and AI

The grains are computed by scripts from procedural noise: no image was generated by an image model, and no source image goes into the making. The scripts, the CSS file and the demo were produced with an AI assistant, then reviewed and checked: dimensions, colour profile, file weight, no text in the images and the seam of every tile.

• JPEG 2,048 px, sRGB: the opaque tiles, with an sRGB colour profile and no other metadata. They open in most design and photo editing tools.
• PNG 2,048 px transparent: the layers, usable in most design tools that accept a tiled image fill.
• WebP 1,024 px: the web tiles, readable by any recent browser.
• CSS: the class sheet, with no script, no dependency and no external address.
• HTML: the demo page, to open in a browser, offline.

Good to know

• The grain-speckle layer is sparse by nature: it only carries black particles, on a fully transparent background. It reads on a light or mid-tone background, but has no effect on a black one. Its greyscale web version reads on a mid-grey background.
• The other layers carry black and white: they work on any background colour and all have the same strength at the same opacity.
• These are flat textures, for interfaces and illustration. No relief or roughness maps for 3D are included.
• The textures contain no text and no brand.

The textures come under a commercial licence: you can use them in your personal and professional projects, including for your clients and in products you sell, but you cannot resell or redistribute the files, even for free.

• Grainy gradient: textured, elegant gradients
• The mesh gradient to illustrate your mockups
• The sister packs in the same series, delivered in the same formats: seamless paper and board textures and seamless soft concrete, plaster, linen and felt textures.

1.0.0 (11 November 2026): first version.