Seamless soft concrete, plaster, linen and felt textures (8 textures)

These textures are for UI designers and front-end developers who want to give a background, a card, a header or an illustration the surface of plaster, concrete, linen or felt, without building noise by hand. 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 relief of the material.

• 8 textures: 4 materials, each at two scales.
  • Soft concrete: smooth-plaster and soft-concrete.
  • Fabric: raw-linen and wool-felt.
  • The -large suffix keeps the material at the scale of its source image; the -small suffix shows it finer, for a quieter background.
• 8 opaque tiles (opaque/<name>.jpg): the material in colour, as 2,048 px square JPEGs.
• 8 transparent layers (layer/<name>.png), as 2,048 px square PNGs: white where the material is lighter, black where it is darker, with the strength carried by transparency. The palette is fixed: black and white only, 0 % grey, over 32 transparency levels. Every layer in the series has the same strength at the same opacity.
• 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 texture.

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. It works on any background colour. 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 material over the existing content, and the --tx-opacity variable sets its strength. .tx-bg-<name> sets a full background, material included, whose colour is set by the --tx-fill variable.

<link rel="stylesheet" href="css/textures.css">
<section class="tx-soft-concrete-large">…</section>

Production and AI

Each texture starts from a source image generated with Krea, using the krea-2 model: 4 source images of 1,024 px, one per material. These sources were then made tileable and processed locally: seamless synthesis at 2,048 px, lighting flattened, colour grading, layers and web tiles. The source images are not included in the archive. The seam of each texture was checked on a 3 × 3 mosaic, with no visible join.

The processing 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

• 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 pack in the same series: seamless paper and board textures, delivered in the same formats. The seamless grain textures pack completes the series.

1.0.0 (11 November 2026): first version.