BlurHash Generator
Turn any image into a BlurHash placeholder string, with a live blurred preview and the average color.
Drag & drop an image here, or click to browse
No uploads. Your files stay on your device.
Preview any BlurHash
How it works
BlurHash turns an image into a short string (usually 20–30 characters) that decodes back into a soft, blurred version of the picture. You store that string next to the image and render it as a placeholder while the real file loads, so your layout never flashes an empty grey box.
Drop an image and this tool downsamples it in the browser with the Canvas API, runs the BlurHash cosine transform on the pixel data and shows you the resulting string, the decoded preview and the image's average color. Nothing is uploaded — the encoder is plain JavaScript running on your device. More components mean a more detailed placeholder and a longer string; 4 × 3 is the usual sweet spot, and 1 × 1 gives you a single flat average color. The second panel works the other way round: paste any BlurHash and see what it looks like.
Frequently asked questions
What is a BlurHash?
A BlurHash is a short base83 string — usually 20 to 30 characters — that encodes a very blurred version of an image. You store it in your database next to the image and render it as a placeholder while the real file downloads, so the layout shows a soft colored blur instead of an empty grey box.
How do I generate a BlurHash from an image?
Drop your image onto this page. It is downsampled with the Canvas API, encoded with the BlurHash cosine transform, and the string appears instantly along with a decoded preview. Choose the number of X and Y components (4 × 3 is the common default), then copy the string with one click.
Is my image uploaded, and can I decode a BlurHash back?
Nothing is uploaded: the encoder is plain JavaScript running on your own device, so private images never leave your browser. The second panel works in reverse — paste any BlurHash string and you get its blurred preview, component count and average color.