DesignFree
Free image placeholder generator. Create custom width/height PNG placeholders with colors and labels for mockups.
Last updated 14 October 2026
A PNG drawn in your browser on a canvas of the size you ask for: a solid background, a one-percent border, and a centred label that defaults to the dimensions. Nothing is fetched from a placeholder service, so the image works offline, in a private repository, and in a document that will never reach the internet. There is no URL to go dead later.
It is also exact about pixels. A request for 800 by 450 produces an 800 by 450 image, with no device pixel ratio applied, which is what you want for a mock-up and worth knowing if you expected a 2x asset.
The label is drawn as a single line, always, with a maximum width of 90% of the canvas. When the text is wider than that, the browser compresses the glyphs horizontally to make them fit rather than wrapping to a second line or reducing the font size. Measured on a 400 by 400 canvas with a 53-character label: the text's natural width is 1,232 pixels, the limit is 360 pixels, and the drawn result is 359 pixels wide. The letters are squeezed to about 29% of their proper width, which is well past the point of being readable.
The same label on a 1200 by 200 canvas needs 616 pixels against a limit of 1,080, so it is drawn at its natural width and looks correct. The distortion appears only when the text does not fit, and when it does appear there is no warning.
In practice: keep the label short, or leave it blank and take the default dimensions, which always fit. If you need two lines, this tool cannot give you them.
Width and height are limited to 1 to 4000, and unlike several other tools on this site this one corrects the box rather than leaving your number in it. Measured:
9999 becomes 4000 in the field, and the canvas is 4000 pixels.0 and -5 both become 1.2.7 becomes 2. The decimal is cut off, not rounded.1e3 becomes 1, not 1000, because the number is read as an integer and the reading stops at the letter.Because the field is corrected, the status line, the canvas and the download filename always agree with each other. That is the opposite convention to our Sleep Calculator, which clamps internally and leaves your original number on screen, and it is the better of the two.
Two other proportions are derived from the smaller side. The border is 1% of it, with a floor of 2 pixels, and the label is 12% of it, with a floor of 12 pixels. So a long thin banner gets small text, and a square gets large text, without either being configurable.
Copy does not place an image on the clipboard. It places the PNG encoded as a base64 data URL, which is a single very long line of text. Measured:
Pasted into a CSS file or an img tag that works perfectly well and needs no hosting. Pasted into a chat window, a commit message or a spreadsheet cell it is half a megabyte of gibberish. Use Download for anything you intend to hand to a person, and Copy for anything you intend to hand to a stylesheet.
Base64 also costs about a third in size over the raw file, which is inherent to the encoding rather than anything this tool chose.
The label is drawn in system-ui, the operating system's own interface font. That is Segoe UI Variable on current Windows, SF Pro on macOS, and whatever the distribution has configured on Linux. The letterforms, their widths and therefore the point at which the squashing above begins all differ between them.
This matters in one specific case: if two people generate “the same” placeholder and compare the files, the bytes will not match, and a checksum will say they are different images. They are. If you need a byte-identical placeholder across a team, generate it once and commit the PNG.
To work out the dimensions before you generate one, Aspect Ratio Calculator will scale a ratio to a target width. To choose the two colours, use Color Picker, and check them in Color Contrast Checker if the label needs to be readable.
toDataURL. developer.mozilla.orgsystem-ui generic font family resolves to the platform's own interface typeface. w3.org/TR/css-fonts-4Every behaviour and every value on this page was measured against this tool as it is published, in a browser, on 14 October 2026. The data URL sizes and the squashing figures were read from the generated canvas itself.
Because the text is drawn on one line with a maximum width of 90% of the canvas, and when it does not fit the glyphs are compressed horizontally rather than wrapped. Measured on a 400 by 400 canvas, a 53-character label whose natural width is 1,232 pixels was drawn 359 pixels wide, about 29% of proper width. Shorten the label or use a wider canvas.
No. The tool draws a single line and there is no way to break it. Leaving the label blank gives you the dimensions as the caption, which always fits.
4000 is the maximum on each side, and the box is corrected to show it, so the field, the status line, the canvas and the download filename all agree. The minimum is 1, so a zero or a negative number becomes 1.
The size is read as a whole number and the reading stops at the first character that is not a digit, so 1e3 is read as 1 rather than 1000. For the same reason 2.7 becomes 2 rather than 3.
The image encoded as base64 text, not an image you can paste into a document. Measured, that is 20.9 KB for 800 by 450, 84 KB for 1920 by 1080, and 520 KB for 4000 by 4000. It is ideal for a stylesheet or an img tag and useless in a chat window. Use Download for a file.
No. The background colour is painted across the whole canvas before anything else is drawn, so every PNG it produces is fully opaque.
Expected. The caption uses the operating system's interface font, which differs between Windows, macOS and Linux, so the pixels differ and so does any checksum. Generate the image once and commit it if a team needs the identical file.
No. It is drawn in your browser on a canvas and never sent anywhere, which is why there is no URL to share and also why the image cannot stop working later. Nothing is stored between visits.