Skip to content

Blurhash generator

Create a tiny blurred placeholder for lazy loading.

Runs in your browser

About Blurhash generator

Show a soft, colored placeholder while an image loads instead of a blank box. Drop an image to get its BlurHash string, around 30 characters, plus a preview of how it will render.

  • 4 by 3 components is the usual default; higher values add detail but longer strings.
  • Store the hash alongside the image URL in your database.
  • Libraries exist for React, Swift, Kotlin and more to decode it.

How to use it

  1. 1Drop an image.
  2. 2Choose the component counts for more or less detail.
  3. 3Copy the BlurHash string into your app.

Questions

What is a BlurHash?
A compact string that encodes a very blurry version of an image, so a placeholder can be drawn instantly before the real image arrives.
Can I generate many at once?
Yes, drop a batch and copy the list.
Is anything uploaded?
No. Everything runs in your browser, so your files never leave your device.

More developer tools

Favicon converterTurn any image into favicon ICO and PNG sizes.App icon generatorGenerate the full iOS and Android icon set from one image.OG image generatorDesign a 1200×630 link preview card with templates, presets and the meta tags.OG image checkerPaste a URL and see its link preview, Open Graph tags and what to fix.Color palette extractorPull the dominant colors out of any image.Image color pickerClick any pixel and copy its color.SVG optimizerStrip editor junk and shrink SVG markup.Sprite sheet generatorPack icons into one sheet with matching CSS.