Placeholder images are what you put in a layout while you are waiting for the real photos to arrive. The classic pattern is a grey rectangle with the dimensions written across the middle, so anyone looking at the mockup can see exactly what size image will eventually go there. This generator makes those rectangles at any size you want, in any colors you want, with any label you want, and lets you either download a PNG or copy a data URL for pasting straight into HTML, CSS, or markdown.
The preview renders live in a canvas as you change any input, so you can see exactly what you will get before downloading. Everything happens in the browser — the generator never uploads anything to a server.
Pick a size
Type the width and height in pixels, or click one of the preset buttons for common sizes. The presets cover the sizes you use most often:
- 1200 × 630 — the classic Open Graph / Twitter card size. This is what shows when someone shares a link to your page.
- 1920 × 1080 — full HD landscape, good for hero images and desktop wallpapers.
- 1080 × 1080 — square, matches Instagram feed and most generic “profile picture” slots.
- 1080 × 1920 — 9:16 portrait, matches Instagram Stories, Reels, TikTok, and YouTube Shorts.
- 400 × 400 — small avatar, common default for user profile photos.
For the full per-platform list (headers, posts, banners, covers), see the social media image sizes reference.
Any size from 1 pixel up to 4000 pixels on each side is allowed. Beyond that, mobile browsers start running out of canvas memory and the tool will refuse the input — if you need larger placeholders, use a dedicated image editor.
Pick colors
The background color is what fills the rectangle; the text color is what the label is drawn in. Both use a standard browser color picker. Good placeholders are neutral so they don’t distract from the real design around them — the defaults are a light grey background with a darker grey label, which reads as “image going here” without grabbing attention. If you need high-contrast placeholders for a presentation (where the mockup will be projected and needs to be legible from the back of the room), a medium-dark background with white text works well — the contrast checker will tell you whether the ratio is legible from the back of the room.
Pick a label
The label is the text drawn across the middle of the image. By default it shows the dimensions — “1200 × 800” for a 1200-by-800 placeholder — because that is what most mockup placeholders look like and it lets anyone reviewing the design immediately see what size image will eventually go there. If you want something different — the intended subject (“hero photo”), the filename it will be replaced with (“hero-v2.jpg”), or just empty — you can type anything you like.
The font size scales automatically based on the label length and canvas dimensions. Short labels on large canvases get big type; long labels on small canvases shrink to fit.
Download or copy
Two output modes:
Download PNG saves the image as a standard PNG file. The filename follows the pattern placeholder-{width}x{height}.png so you can drop them into a folder and they sort sensibly. These are real image files — use them wherever you would use a real photo.
Copy data URL copies the entire image encoded as a base64 data URL to your clipboard. Paste it into HTML as <img src="data:image/png;base64,...">, into CSS as background-image: url('data:image/png;base64,...'), or into markdown as . The image lives inside the document string and does not need a separate file. This is handy for prototype HTML files and single-file demos, but the base64 string can be long for larger placeholders — expect roughly 4/3 of the file size as characters.
What this tool does not do
It does not download images from a remote service — the generator is strictly local, so there is no “give me a real photo” mode. For actual stock photos, use Unsplash or similar. It does not support rounded corners, gradients, patterns, or multiple colors in the same image; the output is always a flat rectangle with centered text. For complex placeholders, design them in Figma and export as PNG. And it does not handle SVG output — the result is always a rasterized PNG, which is the right format for 99% of placeholder use cases but not for icons.