Placeholder Image Generator

Create custom-size placeholder images with your own text and colors.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Draws a plain rectangle at any size up to 4000 pixels a side, labelled either with its own dimensions or with wording you supply, for filling the gaps in a layout before the real artwork exists.

How to use it

1Set Width and Height in pixels, then pick a Background and a Text color.
2Leave Text empty to have the image labelled with its own dimensions, or type your own caption.
3Choose PNG, JPEG or WebP, then Download — or press Copy to take the whole image as a data URI.

Example

Input: 600 × 400, Text left empty, format PNG
Output: placeholder-600x400.png — a grey rectangle with 600×400 across the middle at 50px

Label size is one eighth of the shorter side with a 10px floor, so a short wide banner gets small type. There is no line wrapping: a long caption is squeezed horizontally to fit 90% of the width rather than breaking onto a second line. Anything outside 1–4000 on either side stops with 'Width and height must be whole numbers between 1 and 4000.'

What happens to your data

Placeholder services work by hot-linking, so every later render of your mock-up is another HTTP request to someone else's host carrying your page as the referrer. Nothing here works that way: the rectangle and its caption are two canvas calls — fillRect, then fillText — and the result is handed back as a self-contained data URI, so a layout built with it makes no requests at all when it is opened later. The KB figure under the preview is arithmetic on the length of that string, not a measurement taken anywhere else.

Last updated August 2026

The design is due and the photography is not. Or you are building a card component and need something in the image slot that will not collapse the grid, or checking that a newsletter template holds together before anyone has written the copy. What you want is a rectangle of a known size that is plainly not the real picture.

Decide first whether you want a file or a URL. Placeholder services hand you an address you edit in place — change the numbers in the markup and the picture changes with it, which suits a layout that is still moving around. What you get here is a finished image file that has to be made again when the size changes. The file wins wherever the mock-up has to survive without a network: a fixture committed to a repository, a slide deck, a design handed to a client, an email opened inside strict filtering.

One hard limit is worth knowing before you start. Every file comes out opaque, PNG included, because the background colour is painted across the whole canvas before anything else is drawn — so this is no use for checking that something underneath shows through. A flat colour also compresses far better than a photograph does, which makes a placeholder the wrong thing to load-test a gallery with.

The common mistake is choosing a placeholder that looks plausible. A neutral grey rectangle at the right size reads as a deliberate design decision on a review call, and that is how one reaches production. Colours nobody would ship — magenta, lime — are the ones that get caught.

How it works

Toolvore draws everything on a single off-screen canvas that the page creates once and reuses. The canvas is resized to exactly the pixels you typed, filled with the background colour, and the label drawn centred on the middle point in a generic sans-serif — whatever your machine resolves that to, which is why two people with identical settings can get slightly different lettering. The result is exported through the browser's own encoder at a quality of 0.9, a figure JPEG and WebP use and PNG ignores. Every change redraws the whole thing at full size, so each keystroke in the text field rebuilds and re-encodes a 4000-pixel canvas as readily as a small one. Beyond the rectangle and one line of type there is nothing: no border, no diagonal cross, no font choice, no way to move the label off centre. Both colours come from your operating system's picker, so they arrive as solid hex with no alpha available. The preview is the real file scaled down by CSS rather than a separate render, so what you see is what downloads.

Common use cases

Filling image slots in a layout before the photography exists
Building a wireframe or component demo where the picture is not the point
Making a test fixture at an exact pixel size for an upload or crop routine
Checking that a card grid holds its shape at an unusual aspect ratio
Standing in for a hero image in a deck sent to a client
Producing an obvious stand-in that cannot be mistaken for final artwork

Frequently asked questions

What size should a placeholder image be?＋

Match the slot rather than picking a round number. Take the width the element gets at its largest breakpoint and the ratio the design calls for, then double it if the image will be seen on a high-density screen and you want the label sharp. The usual ratios are 16:9 for hero and video slots, 4:3 for older photography, 1:1 for avatars and product tiles, and something nearer 3:1 for banners. Where the real image will be responsive, generate the largest size you need — browsers scale down cleanly and up badly. If you are only checking layout, the ratio matters more than the pixel count.

Is it better to use a placeholder service or a generated image file?＋

A service gives you an address you edit inline: change the numbers and the picture changes, which is quick while a layout is still moving. A file is fixed and has to be regenerated when the size changes. The file wins on durability. A mock-up pointing at someone else's host stops working when you are offline, when the service changes its URL format or disappears, and often when a content security policy blocks the domain. For anything that has to open reliably months later — a fixture in a repository, a design handed over, a deck someone opens on a train — a local file is the safer of the two.

PNG, JPEG or WebP for a placeholder?＋

PNG, for anything with text on it. Flat colour and sharp letterforms are what lossless compression is best at and what JPEG is worst at: its transform leaves ringing around high-contrast edges, so the caption picks up a halo that a photograph would have hidden. WebP is smaller than both and reads in every current browser, but some older desktop software, several email clients and the odd CMS uploader still refuse it — not a thing you want a placeholder to be the cause of. Choose JPEG only when you are deliberately testing something downstream that expects one.

How do I make a transparent placeholder image?＋

Not with this one. The background is painted across the full canvas before anything else is drawn, so every file is opaque whatever format you pick, and the colours come from your operating system's picker, which offers no alpha here. For a genuinely transparent stand-in, reach for an empty element with a CSS background, which costs no file at all, or write a short SVG, where a rectangle with a partial fill opacity is three lines. Transparency is usually wanted to check that something underneath shows through, or that a logo is not sitting on a white box — both easier to test in CSS than in a raster file.

Do placeholder images cause problems if they reach the live site?＋

They do, quietly. A grey rectangle with dimensions across it looks intentional in a screenshot, and the alt text shipped alongside it is usually empty or still says placeholder, which is what a screen reader announces. The risk worth guarding against is the one nobody notices, so pick a colour that will be spotted in review. The download is already named with the word placeholder and the dimensions, which makes it easy to search for across a project before release. Layout shift is a separate matter: what stops the page jumping when the real picture arrives is width and height attributes on the element, not anything about the stand-in.

What is the difference between this and a blurred low-quality image placeholder?＋

They solve different problems. A design placeholder stands in for a picture that does not exist yet and is meant to be replaced before anyone sees it. A low-quality image placeholder — a tiny blurred copy of the real photograph, or a hash that expands into one — stands in for a picture that does exist but has not finished downloading, and is meant to be seen briefly by real visitors. The second is a loading strategy, generated from the real file by a build pipeline rather than chosen by hand. A flat rectangle makes a poor version of it, because it holds no colour relationship to what replaces it.

Is the image uploaded anywhere?＋

Nowhere. The canvas is made by the page and never attached to the document, and the component issues no network request of any kind, so the dimensions, the colours and whatever you typed as a caption stay on the machine you typed them on. The download is an ordinary link pointing at the generated string rather than at a file sitting on a server, so saving is local too. Nothing persists between visits: every setting is component state with no storage behind it, so a reload returns you to 600 by 400 in the default grey with the text box empty. Leave the page mid-edit and there is nothing to clear up.

Why does my placeholder look blurry or soft on a phone?＋

Because the screen has more physical pixels than the layout hands it. A slot 400 CSS pixels wide on a phone with a device pixel ratio of 3 is being drawn into 1200 real ones, so a 400-pixel image is stretched threefold — the background stays perfectly clean, since flat colour has nothing to lose, while the lettering goes soft. Generate at two or three times the layout size and let the browser scale it down. The opposite mistake costs bandwidth rather than sharpness: an image far larger than its slot looks fine and wastes the download. Match the pixels to the display rather than to the CSS.