SVG source, pixel-exact PNG
The image is described as SVG, so the preview is exact and the SVG download scales losslessly; the PNG is rasterised from that same source at precisely the width and height you set, never resized up from a smaller bitmap.
ImageRuns in your browser
Placeholder Image Generator
Create a sized, labelled stand-in image for a design or a build in seconds.
- Input
- No upload needed — instant
- Privacy
- Nothing is uploaded
- Cost
- Free · no sign-up · no watermark
Loading tool…
The tool is loading its code on your device. This happens once and is cached for later visits.
Processed entirely on your device
Everything you type or paste is handled by JavaScript running in this tab. No request is sent, nothing is logged and nothing is stored. Close the page and it is gone.
Overview
About the Placeholder Image Generator
Generate placeholder and dummy images free in any size — custom background and text colours, an optional centred label, one-click presets, PNG download and copyable SVG.
Every design and every build reaches a point where an image is needed but does not exist yet. A placeholder fills the gap: a coloured rectangle, usually grey, with the intended dimensions printed in the middle so anyone looking at the layout knows how big the real thing should be. This tool draws one to your exact specification and exports it as either a scalable SVG or a pixel-perfect PNG.
Why the label is the point
A blank coloured rectangle tells a developer nothing. Printing 1200 × 630 in the centre turns the placeholder into a specification: the art that eventually replaces it should be this size and this shape. That is the whole reason placeholder images exist in a workflow rather than being merely decorative — they carry a dimension through a hand-off. Leave the label blank and the tool prints the dimensions for you, which is the most common case.
SVG first, PNG on demand
The image is authored as an SVG — a rectangle and a centred text element with a width, a height and a viewBox. That single string does double duty:
- As SVG it is a few hundred bytes and scales to any size without ever blurring, which suits responsive layouts, print and anything resized later.
- As PNG the same string is rasterised through the browser's SVG renderer onto a canvas of exactly the requested pixel dimensions, so the download matches the preview pixel for pixel.
Because the PNG is drawn from the vector at full size rather than upscaled from a smaller bitmap, there is no interpolation and no softness.
The sizes that come up constantly
Any custom size from 16 to 4096 pixels on a side works too; the presets are simply the dimensions that recur often enough to be worth one click.
Colour and contrast
Background and text colour can be picked from a swatch or pasted as hex. The auto-contrast helper reads the background's WCAG relative luminance and chooses black or white text accordingly, so a near-black background never produces near-black lettering. It is the same calculation an accessibility checker uses, applied to a two-element image where getting it wrong means the label simply disappears.
Choosing a format downstream
Most destinations still expect a raster. Content-management systems, social networks and advertising platforms frequently cannot accept or render an SVG upload, so for those, export the PNG. Keep the SVG when you control the front end and want one file that serves every screen density and every resized container. The tool offers both from the same inputs, plus the raw SVG code to copy directly into markup as an inline element or a data URI.
A private, instant workflow
Nothing is uploaded and no account is involved. The rectangle and its label are assembled in the browser and rendered locally, so the dimensions of an unlaunched design never leave the machine, and the file is ready the instant the preview looks right.
Step by step
How to use the Placeholder Image Generator
Pick a preset size or type your own width and height in pixels.
Choose a background and text colour, or paste hex values; auto-contrast snaps the text to a readable colour.
Optionally set a centred label — leave it blank to print the dimensions — and adjust the font size.
Watch the live preview update, then download a PNG at that exact pixel size.
Or take the SVG, which scales to any size without blurring, and copy its code into your markup.
Why use it
Benefits and common use cases
What this tool is good for, and what it deliberately does not try to do.
Presets for the sizes you need
One click sets the Open Graph 1200 × 630, a square social post, a full-HD hero, a blog banner, an avatar or a medium-rectangle ad — the dimensions that come up constantly in design and development.
Readable text without guesswork
Auto-contrast computes the WCAG relative luminance of your background and picks black or white text accordingly, so a dark swatch never ends up with dark, invisible lettering.
Private and instant
Everything is drawn in your browser from an SVG string. Nothing is uploaded, no account is needed and there is no queue — the file is ready the moment the preview is.
Questions
Frequently asked questions
Short, honest answers about quality, limits and privacy.
What is a placeholder image used for?
It stands in for artwork that does not exist yet — a mock-up, a staging build, a wireframe, a content-management preview or a layout that must not shift while the real image loads. The labelled box communicates the intended size at a glance, which is why the dimensions printed in the centre are the point rather than a decoration.
Should I download the PNG or the SVG?
Take the SVG when the image will be scaled, printed or resized later, since it stays sharp at any size and is usually a few hundred bytes. Take the PNG when the destination expects a raster — most content-management systems, social platforms and ad managers do — because they cannot always accept or render an SVG.
Why does the PNG match my size exactly?
Because it is rasterised from the SVG at the width and height you entered, drawing onto a canvas of precisely those pixel dimensions. It is not a small image scaled up, so there is no blur or interpolation — the pixels you download are the pixels you previewed.
Can I use these images commercially?
Yes. The tool generates a simple coloured rectangle with optional text from your own inputs, with no stock photography, fonts or artwork embedded. The output is entirely yours to use, though a plain grey box is a stand-in for a hand-off, not something a finished product should ship with.
How do I make an Open Graph placeholder quickly?
Click the 1200 × 630 preset, which is the ratio every major platform uses for a link card, set your colours, optionally type a label and download the PNG. Then point your og:image at the uploaded file's absolute URL. For the surrounding head markup, pair this with the meta tag generator.