How to make a seamless tiling background

A tile is seamless when its left edge matches its right and its top matches its bottom. Lay it out in a grid and the joins disappear.

Where a visible seam comes from

A repeating background is one small image drawn over and over. The browser butts each copy against the next, so the right edge of one lands beside the left edge of the next.

If those two edges do not match, you see a line. Repeat the image across a page and the lines form a grid. That grid is the visible seam, and the eye is unreasonably good at spotting it.

Two ways out:

• Repair the edges. Edit an image you already have until its edges agree. Offset-and-clone in an image editor does this.
• Never make an edge. Generate the image so its edges agree from the start.

This page takes the second route, using Flield, a seamless background generator that runs in the browser. Both panels below are drawn live by the same code the app uses. Where a name is Flield's own rather than the general term, it says so.

The same tile, with and without a mirror

The left panel below is one tile. The right is that tile repeated nine times. Switch the symmetry and watch the grid on the right.

With a 4-way mirror the repeat is invisible. Without one, every boundary announces itself.

4-way mirror is Flield's name for the setting. Mirroring a tile so it repeats is an old idea and goes by other names elsewhere.

Why mirroring works

The usual way to make a texture tile is to generate something, notice the seam, then repair it. You offset the image by half its width and height. Then you clone and blur until the cross in the middle stops showing. It works. It is also tedious, and it degrades the texture where you touch it.

Mirroring makes the seam impossible instead. Three steps:

1. Generate only the top-left quadrant.
2. Mirror it across the vertical axis. The last column is now a copy of the first.
3. Mirror that across the horizontal axis. The last row is now a copy of the first.

Set two copies side by side and the pixels meeting at the boundary are identical by construction. Nothing to blend. The pattern reads as continuous because across that edge it is.

That is also why the middle option in the demo only half works. Mirroring across one axis buys seamlessness along one pair of edges. You need both.

What the Tile preset does

Tile is a Flield dimension preset. It sets all of this at once:

• Squares the canvas at 512 by 512.
• Puts both layers on a 4-way mirror.
• Turns the shape mask off.
• Locks the last two, so a randomize pass cannot undo them while you explore.

Why the shape mask has to go

A mask breaks the edge equality the mirror just established. A centered circle, a vignette or a corner fade sits relative to the canvas. It is not generated as part of the pattern, so it does not repeat. Tile a vignette and you get a grid of dark blotches.

Anything that treats the canvas as a frame rather than as a swatch is incompatible with tiling. The preset resolves that by removing it.

Why 512 pixels

512 is not a device size. It is a round, highly divisible number for a texture swatch. Common block sizes divide it evenly, so no partial cell is left at an edge. A partial cell at the edge would bring the seam back by another route.

Two different things both called Tile

Worth separating, because the names collide.

The Tile dimension preset

Described above. It makes the whole canvas into one swatch, and that swatch repeats cleanly when you tile it yourself in CSS or in a design tool.

Tile symmetry

A pattern mode, in each layer's symmetry menu. It generates one small region and repeats it three by three inside the canvas. The result is a grid you can see, held in a single image.

The preset is for producing a texture to repeat elsewhere. The symmetry mode is for making a repeated grid the visible subject. They are unrelated. Using the symmetry mode does not make your canvas tileable.

Using your own brand colors

This is where generating beats converting. Every other seamless-texture tool starts from an image you supply, so the palette is whatever the source photograph contained. Matching a brand means editing toward it afterward.

There is no source image here. The three colors are parameters, so a brand palette goes in directly and every tile comes out already correct.

1. Set the hue, saturation and lightness ranges under Palette Range.
2. Lock the colors.
3. Let everything else reroll.

The result is an endless run of different tiles, all on-brand, rather than one tile you have to recolor.

Using the tile on a page

Export a PNG or an SVG at the Tile preset, then repeat it the ordinary way:

.hero {
  background-image: url("tile.png");
  background-repeat: repeat;
  /* Half the exported size renders the texture at 2x on the
     same footprint, which keeps it crisp on a dense display. */
  background-size: 256px 256px;
}

Export SVG rather than PNG

The output is rectangles rather than pixels, so it scales to any size without softening. The files stay small too, because the format stores shapes instead of every cell.

A tile can also move

The mirroring holds while a flow field animates underneath it. A tiled background can drift or breathe and the repeat still never shows. The guide covers that under Motion. Looping animated backgrounds covers how the loop closes.

Any of the six textures still tiles

Each layer draws its field one of six ways: soft bands, cloudy filaments, marbled swirls, contour lines, fine strands or a woven mesh. The seam is safe whichever you pick. The flow field explainer shows all six.

Try it

Open Flield, free with no signup, and press Tile under the canvas dimensions. Then press Random until something fits. The guide covers the rest of the controls. The flow field explainer covers what shapes the texture underneath.

Flield is free for noncommercial use under the PolyForm Noncommercial License.