BlurHash Generator

How to use

1. 1Keep the Image to BlurHash tab selected and drop an image, or click to choose a file.
2. 2Adjust the horizontal and vertical component sliders to trade string length for detail, watching the preview update.
3. 3Copy the BlurHash string, or copy a ready-made React or JavaScript snippet to use it in your project.
4. 4Switch to the BlurHash to image tab to paste an existing hash, set a width, height, and punch, and render it.
5. 5Use the decoder to verify a hash returned by an API or to preview how a stored value will look.

About this tool

BlurHash Generator converts an image into a BlurHash, the compact ASCII string apps use to show a smooth blurred placeholder while the real image loads. The format was popularized by Unsplash and is used by products like Wolt, Mastodon, and Signal because the string is short enough (typically 20 to 35 characters) to live inside a JSON response or a database column right next to the image URL, then decode to a pleasant blur on any client before the full asset arrives. This tool runs the canonical BlurHash algorithm entirely in your browser. In encode mode you drop an image and the tool draws a downscaled copy to a canvas, reads the pixels, converts them from sRGB to linear light, runs a discrete cosine transform over the number of components you choose, and packs the coefficients into a base83 string. The first character stores the component grid, the second stores the maximum AC value used to quantize the rest, the next four characters hold the average color, and every two characters after that are one more coefficient. You control how many components run along the X and Y axes, from 1 to 9 each: fewer components give a softer, shorter hash, while more components keep additional structure at the cost of a longer string, and 4 by 3 is a balanced default that many apps use. The preview is not a stand-in. It is rendered by decoding the exact string the tool just produced, so what you see is what a client will paint. The tool also generates copy-ready snippets for the React component from the react-blurhash package, the plain JavaScript decode-to-canvas approach using the blurhash package, and a raw data attribute for storing the value. Decode mode does the reverse: paste any BlurHash string, set an output width, height, and punch (a contrast boost applied only at render time), and the tool validates the base83 characters and the declared grid size, reports a clear error if either is wrong, and renders the blur. Because a BlurHash does not store its own dimensions, you always choose the output size yourself. Everything happens on your device. The image you drop is decoded locally with the File API and a canvas, and its pixels are never uploaded.

Free to use. Works in your browser. No signup, no login.