BlurHash Generator - Free Online Tool

★★★★☆ 4.3 (444 ratings)

🔒 Client-side — Your data never leaves your browser ✅ 100% Free — No signup, no limits ⚡ Instant — No server processing

📋 How to Use

1. Upload Image — Upload an image or paste a BlurHash string
2. Select Mode — Select operation mode (encode or decode)
3. Adjust Precision — Adjust component count (4x3 to 9x9) for precision
4. Copy Hash — Copy the BlurHash string for use in your project

BlurHash is an open-source algorithm developed by Wolt that compresses an image into a short string (usually 20-30 characters), used to display a blurry placeholder before the actual image loads. It's more aesthetically pleasing than gray placeholder boxes and ideal for lazy loading in web and mobile apps.

Component count determines BlurHash precision and string length. More components (e.g., 9x9) reproduce color distribution more accurately but generate longer strings. Fewer components (e.g., 4x3) produce shorter strings with blurrier details. Default 4x3 works well for most cases.

BlurHash is just a string — it needs a decoding library (like blurhash-js) to render as a Canvas image on the client side. Major frontend frameworks (React, Vue, Svelte) have BlurHash components. Decoded rendering takes about 20-50ms, very fast.

BlurHash is a pure text string — no extra network request needed (can be embedded directly in HTML/JSON), while traditional placeholder images require an additional HTTP request. BlurHash is also more compact — a 30-character string can represent a blur preview.