Textures

Slate Seamless Textures

20 realistic tiling surface textures for dark interfaces — neutral slate with warm gold accents. SVG plus transparent PNG at 1x, 2x and 4x.

  • ui
  • svg
  • transparent png
  • texture
  • seamless
  • tiling
  • material
  • realistic
  • realistic
  • dark ui
Sheet showing 20 realistic tiling surface textures from the Slate family, arranged on a transparency checkerboard with their pixel sizes printed underneath
1600×3907 previewtransparency shown as checkerboard

About this pack

Slate Seamless Textures is a set of 20 tiling surface textures drawn in the realistic style, where a five-stop specular gradient runs down a brushed metal face with rivets at the corners. It contains brick, stone and tile surfaces, wood, fabric and metal, dirt, grass and plaster and a matching height map for every surface.

These are vector-drawn surfaces, not photographic PBR scans, and it is worth being plain about that: they will not pass for a photoreal material under a physical camera. What they are good for is stylised work, 2D backgrounds, UI fills and anything that has to stay readable when it is scaled or recoloured — cases where a photo scan is the wrong tool anyway.

The brush texture is a 3px line pattern rather than real noise: noise triples the PNG weight for a texture nobody can see at 1x. The shadow is layered rather than blurred so it holds up at 4x.

Inside that style this is the Slate reading of it: a dark interface on a neutral slate palette with warm gold accents, built around a single bordered frame, square-cornered buttons at 128x40, banded bars divided into 10 segments, and outlined icons on a 24px grid. Those measurements are why two families can share an art style without being interchangeable: the style decides how an edge is drawn, the numbers decide what the interface is for.

Every motif that crosses an edge is drawn again on the opposite edge, which is the whole difficulty of a tiling texture and the thing that is easy to get subtly wrong. Each surface ships with a greyscale height companion so a shader can derive a normal map at whatever strength the scene wants, rather than baking one in at a strength that suits nothing.

Every sprite ships as an editable SVG and as transparent PNG at 1x, 2x and 4x, so you can drop the PNGs straight into an engine or open the vector and change a colour. Built to the same measurements as the rest of the Slate family, which means this kit and the Slate panel kit line up without either being resized. A good fit for realistic and simulation interfaces.

Download

Direct link · no sign-up · no wait page
Download ZIP1.4 MB

Complete set — SVG sources, PNG exports at 1x/2x/4x, licence and readme

Files included in this pack
FileFormatSizeDownload
Complete set — SVG sources, PNG exports at 1x/2x/4x, licence and readmeZIP1.4 MBGet →
Brick wall, seamless tile, realistic, editable SVGSVG31 kBGet →

How to use it

  1. Set the material to repeat in both axes at the source size; the tile is authored square so a non-uniform scale is what introduces a seam, not the art.
  2. Feed the -height file into a normal-from-height node rather than using it as a normal map directly — it is a greyscale elevation, not an RGB normal.
  3. Recolour by tinting rather than by editing the SVG if you need a variant; the tones are chosen to survive a hue shift without the mortar or grain disappearing.

License

Creative Commons Attribution 4.0 — Free for commercial use. Credit required. Full terms · What this means in practice

Copy-paste credit line
"Slate Seamless Textures" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/3d/textures/slate-textures