peartools

BlurHash Generator

Turn an image into a short BlurHash string you can store and decode into a colored blur while the full image loads. Adjust the detail, compare the blur to your original, and copy the string. Everything happens in your browser, so nothing is uploaded.

Drag and drop an image here, or

JPG, PNG, WebP, and GIF work. Up to 25 MB. Nothing is uploaded.

What is a BlurHash?

A BlurHash is a compact way to describe the blurred look of an image in a short string of text. It was created so apps could show something better than a blank gray box while a photo loads: a smooth blur with the right colors in the right places.

Under the hood it keeps a small set of frequency components, a bit like the low-detail part of a JPEG. Because the result is only 20 to 30 characters, you can store it right next to the image URL in your database or API response, with almost no added weight.

You generate the string once, usually when the image is first added, and decode it on the client. The same string works across the web, iOS, and Android, which is why BlurHash has the widest library support of the placeholder formats.

Why use our BlurHash generator

  • ·Free. No signup, no API key, no limits.
  • ·Runs in your browser. Your image is never uploaded or saved.
  • ·Adjustable detail. Set the X and Y components and see the blur update live.
  • ·Real preview. The decoded blur sits next to your image, not a guess.
  • ·Compare formats. Links to the ThumbHash and LQIP generators when you want to weigh the options.

How to use it

  1. 1

    Add your image

    Drag a JPG, PNG, or WebP onto the box or pick a file. It is read in your browser and never uploaded. The tool downscales it and encodes a BlurHash from the small version.

  2. 2

    Tune the detail

    Use the X and Y component sliders to set how much detail the blur keeps. More components mean a more detailed blur and a slightly longer string. 4 by 3 is a common default.

  3. 3

    Compare the preview

    The decoded BlurHash sits next to your original, so you can see the blur a visitor would see while the full image loads and adjust until it looks right.

  4. 4

    Copy the string

    Copy the short BlurHash string and store it with your image, usually in your database or JSON next to the image URL, ready to decode on the front end.

How to decode a BlurHash on the web

Once you have the string, a BlurHash library paints it to a canvas at whatever size you need. In JavaScript it looks like this:

import { decode } from "blurhash";

// The string from this tool, plus the size you want to paint.
const pixels = decode("LEHV6nWB2yk8pyo0adR*.7kCMdnj", 32, 32);

const canvas = document.createElement("canvas");
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(32, 32);
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
// Show the canvas, then swap in the real image once it loads.

There are ready-made components for React, Vue, and Svelte, plus native decoders for Swift and Kotlin, so the same string works on every client.

Who uses BlurHash placeholders

Anyone loading images on a site or app can use a BlurHash to make the wait feel smoother. These are the people who use it most:

  • ·Front-end and full-stack developers. Show a smooth blur in place of a gray box while images load, using the same BlurHash string across your web, iOS, and Android clients.
  • ·Teams building image-heavy feeds. Photo galleries, social feeds, and product grids feel faster when every card has a colored blur instead of an empty space. BlurHash is the format many of these apps already use.
  • ·Backend engineers preparing data. Generate a BlurHash once when an image is first added and save the string. This page is a quick way to test what a given image produces before wiring it into a pipeline.
  • ·Designers checking the look. See how the blur reads for a real image, and pick a component count that keeps the shapes recognizable without adding weight.

Frequently asked questions

What is a BlurHash?
A BlurHash is a short string, usually 20 to 30 characters, that encodes a blurred version of an image. You store the string with the image and decode it on the client to show a colored blur while the full image downloads, instead of a blank or gray box.
How do I generate a BlurHash from an image?
Add your image here and the tool encodes a BlurHash right in your browser. Set the X and Y component sliders for the amount of detail, check the preview against your original, then copy the string. Nothing is uploaded.
What do the X and Y components mean?
They set how many bands of detail the blur keeps across (X) and down (Y) the image. More components capture more of the layout and make a slightly longer string. Values of 3 to 5 per axis suit most photos; 4 by 3 is the common starting point.
How do I decode a BlurHash on my site?
Use a BlurHash library for your platform. There are decoders for JavaScript and the browser, React, Vue, Swift for iOS, and Kotlin for Android. You pass the string and a target width and height, and the library paints the blur to a canvas or image.
Is BlurHash better than a ThumbHash or an LQIP?
They solve the same problem in different ways. BlurHash has the widest library support. ThumbHash produces a smaller hash that also carries the average color, aspect ratio, and transparency. An LQIP is a real tiny image you can use with no decoder. Try our ThumbHash generator and LQIP generator to compare.
Are my images private?
Yes. The whole process runs in your browser. Your image is never uploaded to a server or saved anywhere, and once the page has loaded you can even use it offline.