Mosaic effect for images
Turn a photo into a tile-style mosaic: the image is cut into tiles of uniform average color, separated by adjustable grout lines, for an artistic pixelated look.
How it works
The image is cut into a grid of regular square tiles; for each tile, the average color of the pixels it contains is calculated, then a solid square (or a square with rounded corners) of that color is drawn in its place, with grout in the chosen color all around to imitate the look of tiling.
What tile size should I choose?
Small tiles (8 to 16 px) keep the original image easy to recognize while giving a slight pixelated effect, while large tiles (50 px and up) produce a very abstract result where the original image becomes hard to recognize up close.
What is the grout for?
The grout adds visible spacing between each tile, reinforcing the tiled or physical mosaic effect. Set its thickness to 0 for a pure pixelation effect with no separation between tiles.
The average color calculation and final rendering happen entirely in your browser, without sending your image to a server.