Skip to content

Placeholder Image

Generates a solid or gradient placeholder at any size with the dimensions drawn on it.

A grey box at exactly the size you need, with the dimensions drawn on it — for a layout that is waiting on real photography. It comes out as an SVG data URI you can paste straight into CSS, which is smaller than any PNG and costs no request.

🔒 Runs entirely in your browserplaceholderdummymockupgenerator
Fill
1200 by 630 placeholder

SVG data URI

580 byte

Percent-encoded rather than base64: about 25% smaller, and you can still read it. Paste straight into background-image: url("…")

How to use it

  1. Set the size

    The exact pixel dimensions of the slot. With the label on, they are drawn onto the image, which is what makes a wrong-sized box obvious in a layout.

  2. Choose solid, gradient or noise

    Solid and gradient stay SVG. Noise has to be a PNG, because a per-pixel random field as SVG would be megabytes of rectangles.

  3. Copy the data URI

    Percent-encoded rather than Base64: about 25% smaller, and still readable in the stylesheet.

Common questions

Why is the SVG version not available for noise?

Because SVG has no per-pixel random primitive that renders identically across engines. Expressing it literally means one rectangle per pixel, which for a 400×300 box is 120,000 elements.

Does the noise change every time?

No — it is seeded, so the same settings give the same image. A placeholder that changed on every render would make a visual regression suite useless.

Can I use these in production?

The data URI, yes — it is a few hundred bytes and it never 404s, which is more than can be said for a third-party placeholder service. Just remember to remove them, because a placeholder that shipped is invisible in code review.

Feed it from

BlurHash / ThumbHash

Encodes an image into a short BlurHash or ThumbHash string for use as a loading placeholder.

Runs entirely in your browser

Lorem Ipsum Generator

Generates placeholder paragraphs, sentences or words in Latin, English, Korean, Japanese or Chinese.

Runs entirely in your browser

Avatar Generator

Generates a deterministic identicon or initials avatar from a name or email, as SVG or PNG.

Runs entirely in your browser

Next

These accept what this tool produces, so the result can go straight in.

BlurHash / ThumbHash

Encodes an image into a short BlurHash or ThumbHash string for use as a loading placeholder.

Runs entirely in your browser

Device Mockup

Places a screenshot inside a phone, tablet, laptop or browser frame with a background and shadow.

Runs entirely in your browser

Image to Base64 / Data URI

Encodes an image as a Base64 string or a ready-to-paste data URI for CSS, HTML or JSON.

Runs entirely in your browser

Background Remover

Keys out a flat or single-colour background in OKLab and returns a transparent PNG, with a brush for fixing the edges.

Runs entirely in your browser

EXIF Remover

Strips camera, GPS and editing metadata from photos while leaving the pixels untouched.

Runs entirely in your browser

Favicon Generator

Produces the whole favicon set — ICO, PNGs, Apple touch icon, web manifest — plus the HTML to paste.

Runs entirely in your browser