1001Ferramentas
🖼️Utilities

Placeholder Image Generator

Generate PNG placeholder images at chosen dimensions and colors with centered text. Useful for prototypes.

Download PNG

What is it for?

The tool builds a PNG with centered text, using whatever dimensions and colors you pick. It comes in handy to fill layout gaps while a design is still a draft, with no need to lean on outside services.

The drawing happens in the Canvas, right inside your browser. What you get back is a Data URL, so you can preview it there and download it.

Nothing leaves your browser; the whole thing runs locally.

Generate placeholder images

Halfway through building a site or app, there's always a stand-in image missing before the final ones turn up. This tool generates placeholder images in PNG at the exact size you ask for, with a background colour and centred text.

You pick the width, height and colours, and the image comes out with the measurements written in the middle, that grey rectangle reading "600×400", or whatever size you ask for, marking where the real content will go. Good for putting together mockups, testing responsive layouts and seeing how a design behaves while the final images are still on the way.

The image is born entirely in the browser, ready to download and use. You don't lean on an external placeholder service, and nothing is sent anywhere.

Frequently asked questions

What size and file format does the generated image use?
The page loads with an image already drawn at 600 by 400 pixels, light grey background and dark grey text, and it redraws on every keystroke in any field. Leave the text box empty and the drawing shows its own dimensions, written as width by height with a multiplication sign. Output is always PNG, downloaded under a fixed filename; there is no JPEG, WebP or SVG option, and no URL-style endpoint like the placeholder services that take the size in the path.
Is there a limit on width and height?
The fields advertise a minimum of 1 and a maximum of 4000 pixels, but that ceiling is merely a form attribute: the code never clamps what you type, so nothing stops a request for 12000 by 12000. Once past the largest canvas area the browser will allocate, drawing fails and the download comes out as an empty or corrupt file with no warning at all. An empty or zero field falls back to 600 and 400. Staying under the advertised ceiling is wise whenever the image really has to be usable.
Why did my text spill over the edges of the image?
Because the text is drawn as a single centred line with the font locked at 15 per cent of the image's shorter side — there is no automatic wrapping and no shrink-to-fit. A long sentence on a narrow image, or a thin banner like 800 by 50, will run off both sides and get clipped. The fixes are to shorten the text, raise the height, or pick more square dimensions. There is also no control over typeface, weight, alignment or position: it is always bold sans-serif, dead centre.

Related Tools