Pixelate entire images or selected regions with adjustable block size for censoring or effects.
Pixelation hides detail by replacing the image with a grid of colored squares, each filled with the average color of the pixels beneath it. The tool applies this to the whole image or only to a region you draw, and the block size is adjustable: coarse blocks hide more, fine blocks keep the image readable. All processing happens in the browser, so the image never has to be uploaded. The surprise for most users is that the effect is one-way - the original pixels are discarded, nothing can un-pixelate the result, and small blocks over a face can still leave it recognizable.
A concrete input and expected output from the current implementation.
Input
Upload a 640 x 480 px photo, drag a selection box over the 160 x 120 px face area, set block size to 20 px, apply.
Expected output
Only the selection changes: it renders as 48 square blocks in an 8-by-6 grid (160 / 20 = 8 columns, 120 / 20 = 6 rows), each a flat 20 x 20 px square filled with the average color of the original pixels it covers. The rest of the 640 x 480 px photo keeps its original pixels.
With a 20 px block size, the selected region is divided into cells of 20 x 20 px: 160 / 20 = 8 cells across and 120 / 20 = 6 down, so 8 x 6 = 48 blocks, each filled with the average color of its original pixels. The grid applies only inside the selection; the rest of the image is unchanged.
The image is divided into cells of the chosen block size, measured in pixels. Every pixel within a cell is replaced by the cell's average color, so a detailed area becomes one uniform square. Doubling the block size quadruples the pixels averaged per cell, which is why the effect gets coarser so quickly.
With no selection, every cell in the image is averaged. With a selection, only cells inside the selected area change; cells on the selection boundary cover a mix of selected and unselected pixels, and everything outside the selection keeps its original pixels. Block size and selection are independent - changing either leaves the other untouched.
No. Averaging discards the individual pixel values, so the pixelated output holds less information than the original and cannot be inverted. If you might need the unedited image, export it before applying the filter. Losing the exact pixels also does not guarantee anonymity - faces pixelated with small blocks can still be recognized.
One large enough that the face spans only a few blocks - in a typical photo that usually means 32 px or more, while 4-8 px blocks keep the facial structure recognizable. The right value depends on the image size and how the result will be viewed, so test on a copy and check it at the size it will actually be seen.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.