BlurHash Generator

What is BlurHash (in one paragraph)

BlurHash is a compact string — typically around 28 characters — that encodes a blurred preview of an image. Instead of showing an empty box while a photo loads, apps decode the hash instantly and paint the blur first; the sharp image then fades in over it. It's the shimmer-placeholder pattern you know from Medium, Plaid, and countless Next.js sites: the page feels instant even on slow connections, because something meaningful appears immediately.

BlurHash vs ThumbHash — which placeholder?

BlurHash isn't the only compact placeholder. ThumbHash (by Evan Wallace) is the newer alternative, and the honest answer is that they trade off:

BlurHash wins when you need a plain string — it drops into URLs, JSON, and databases with zero encoding fuss, and a large ecosystem of decoders already exists. ThumbHash wins on fidelity: it encodes the aspect ratio (BlurHash doesn't), handles transparency/alpha (BlurHash renders it against black), and produces more accurate colors in roughly the same size. New projects with no legacy constraints usually pick ThumbHash; existing BlurHash pipelines have no reason to migrate. We ship a ThumbHash generator too — generate both and compare.

How the component sliders change the hash

The two numbers in every BlurHash — X and Y components, each 1 to 9 — set the detail level. 4×3 is the community default: enough to suggest the image's color regions, short enough to stay tiny. Push both to 9×9 and the hash grows longer and more faithful; drop to 1×1 and you get a single average color. The sliders above make this tangible: drag them, regenerate, and watch the decode preview gain or lose detail in real time. For most UI placeholders, the default is the right answer — extra components cost bytes for detail nobody perceives at blur scale.

How to use this generator

1. Drop an image on the page. Click the box or drag the file in — JPG, PNG, WebP, anything the browser opens.
2. Set components (or don't). The 4×3 default suits nearly every placeholder use. Adjust only if you have a reason.
3. Generate and copy. One click encodes the hash, shows the decode preview and the average color. Copy the string into your app.
4. Decode it in your app. Use an official decoder (JavaScript, Swift, Kotlin, Dart all exist) to paint the placeholder while the real image loads.
5. Check any hash. Paste a BlurHash into the checker below to preview what it decodes to — handy when debugging someone else's strings.

Real-world use cases

• Image-heavy feeds — social timelines, marketplaces, galleries: every tile paints instantly, then sharpens.
• Next.js / React apps — generate the hash at build time, ship it with your data, decode client-side.
• Mobile apps — tiny strings travel with API responses; no extra placeholder image downloads.
• Slow-network UX — on 2G/3G, the blur arrives with the HTML while images trickle in.
• Design mockups — the average-color swatch gives designers the palette anchor for skeletons.

Tips

• Stick with 4×3 unless you have a reason. It's the default across the ecosystem for good reason — the sweet spot of size vs fidelity.
• Generate from the final crop. The hash encodes the image you feed it — hash the cropped/art-directed version, not the raw original.
• Pair with aspect-ratio boxes. BlurHash doesn't store aspect ratio, so reserve the layout space with CSS to avoid layout shift.
• Don't hash tiny thumbnails. Feed a reasonably sized source; the encoder downsamples internally anyway.
• Need transparency? Switch. BlurHash can't do alpha — that's ThumbHash territory.

The bottom line

A 28-character string that makes your app feel instant. Generate it here, ship it with your data, decode it on the client — and never show an empty gray box again.