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.
The short definition
A repeating background is one small image drawn over and over. The browser butts each copy against the next. Wherever two copies meet, the right edge of one lands beside the left edge of the other.
If those two edges do not match, you see a line. Repeat it across a page and the lines form a grid. That is what everyone means by a visible seam, and the eye is unreasonably good at spotting it.
There are two ways out. You can take an image you already have and edit its edges until they agree, which is what offset-and-clone does in an image editor. Or you can generate the image so its edges agree from the start, and never have an edge to fix.
This page is about the second route, shown with Flield, a 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 seam, and its absence
Below, the left panel is a single tile and the right panel is that same 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.
One tile
Repeated 3 × 3
Horizontal mirror is the instructive middle case: the vertical seams vanish because left now equals right, but the horizontal ones remain, because nothing has made top equal bottom.
Why mirroring works
The usual way to make a texture tile is to generate something, notice the seam, then fix 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 tedious, and it degrades the texture exactly where you touch it.
Mirroring makes the seam impossible instead of repairing it. Generate only the top-left quadrant, then mirror it across the vertical axis and the horizontal one. The last column is now a copy of the first, and the last row is a copy of the first. When two copies sit side by side, the pixels meeting at the boundary are identical by construction, so there is nothing to blend. The pattern reads as continuous because, across that edge, it is.
That is the whole mechanism, and it is why the middle option in the demo above only half works. Mirroring across one axis buys you seamlessness along one pair of edges. You need both.
The cost is symmetry you can see. A mirrored tile is a mirrored tile, and at large sizes the eye finds the axis. It matters less than you would expect for a background texture at small scale. For a repeating pattern it does not matter at all, because the symmetry reads as part of the design.
What the Tile preset does
Tile is a Flield control, a dimension preset that sets all of this at once. It squares the canvas at 512 by 512, puts both layers on a 4-way mirror and turns the shape mask off. Then it locks the last two, so a randomize pass cannot undo them while you explore.
The shape mask has to go because it 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, and the preset resolves that by removing it.
512 is not a device size. It is a round, highly divisible number for a texture swatch, which means common block sizes divide it evenly and no partial cell is left at an edge. A partial cell at the edge would reintroduce the seam by a different route.
Two different things both called Tile
Worth separating, because the names collide.
- The Tile dimension preset, described above, makes the whole canvas into one swatch that repeats cleanly when you tile it yourself, in CSS or in a design tool.
- Tile symmetry, in each layer's symmetry menu, is a pattern mode: it generates one small region and repeats it three by three inside the canvas. The result is a grid you can see, contained 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, and using the symmetry mode does not make your canvas tileable.
Doing it in your own 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 happened to contain, and 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 that comes out is already correct. Set the hue, saturation and lightness ranges under Palette Range. Lock the colors and let everything else reroll. You get an endless run of different tiles that are all on-brand, instead of one tile you have to recolor afterwards.
Using the result
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;
}SVG is usually the better export for this. The output is rectangles rather than pixels, so it scales to any size without softening. The files stay small too, because the format stores the shapes instead of every cell.
A tile can also move. The mirroring holds while a flow field animates underneath it. So a tiled background can drift or breathe and the repeat still never shows. The guide covers that under Motion, and looping animated backgrounds covers how the loop closes.
The texture inside a tile is yours to pick as well. Each layer draws its field one of six ways. Soft bands, cloudy filaments, marbled swirls, contour lines, fine strands or a woven mesh. They all tile the same way, so the seam is safe whichever you choose. The flow field explainer shows all six.
Try it
Open Flield 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.