Placeholder image generator. Dummy images, made on your machine.

How to use the Placeholder Image Generator

This generator makes a plain colored image of any size with a centered text label, ready to drop into a layout before the real artwork exists. It draws a PNG on a canvas or writes an SVG file, and the label shows the dimensions unless you type your own. It is for developers, designers and anyone building mockups, ad slots or social card templates.

Step by step

1. 1
   Set the size

   Type the Width (px) and Height (px), each from 1 to 5000. The page starts at 1200 by 630. Or click one of the quick sizes, such as OG 1200×630, Square 1080, Leaderboard 728×90 or Story 1080×1920, to fill both fields.

2. 2
   Pick the colors

   Choose a Background and a Text color with the color swatch, or type a hex code such as #3F6B54 or a short code such as #FFF into the box beside it. The swatch and the code stay in sync, and the preview only updates once the code is valid.

3. 3
   Write the label

   Leave Label blank to show the dimensions, for example 1200×630. Type your own text to replace it, and use {W} and {H} anywhere in it to insert the current width and height, as in Hero {W}x{H}.

4. 4
   Set the text size

   Leave Font size (px) blank to let the text fit the image automatically, or type a size in pixels. The label is always bold, centered and on one line.

5. 5
   Choose the format and save

   Set Format to PNG (raster) or SVG (vector). Press Download to save the file, or Copy data URL to copy the image as a data: string you can paste into CSS or an img tag.

Reading the result

• The preview shows the image scaled down to fit the panel. The line under it gives the real size and format, for example 1200 × 630 px · PNG.
• With auto size, the text is the smaller of two limits: the width times 1.6 divided by the number of characters, or 28% of the height, kept between 8 px and 400 px. The default 1200×630 label comes out at about 176 px.
• The file is named placeholder-WIDTHxHEIGHT, for example placeholder-1200x630.png or placeholder-1200x630.svg.

Tips and common mistakes

• Use SVG for responsive layouts, because it stays sharp at any size and the file is tiny. Use PNG when a tool or upload form only accepts raster images.
• The SVG uses the viewer's system font, so the text can look slightly different on another computer. The PNG fixes the text into pixels.
• Long labels do not wrap. With a fixed font size, a long label can run past the edges, so shorten it or leave the size on auto.
• Blank or zero width and height fall back to 1200 and 630, and anything over 5000 is reduced to 5000.
• Data URLs for large PNGs are long strings. For big images, download the file instead of inlining it.

Privacy and limits

The image is drawn by your browser with the Canvas and SVG features built into it. Nothing is uploaded and nothing is saved; reloading the page returns it to the defaults.

Back to the tool

Everything a placeholder should do.

• Set exact pixel dimensions from 1px to 5000px wide or tall, type them in or use a quick-size preset.
• Choose any background and text color with the color picker or by typing a hex code (both stay in sync).
• Add a custom label or let it default to the dimensions, use {W} and {H} tokens to keep it in step with the size.
• Jump to 8 quick-size presets including OG image, social square, 16:9, leaderboard, banner, avatar, hero and story.
• Export as PNG for raster use or SVG for infinitely scalable vector output, with auto-fit or fixed font size.
• Copy the data URL to paste straight into CSS, HTML or a design tool, no file to manage.

Frequently asked questions.

More image & design tools.

Browse the full free-tool library →