Create an instant placeholder image for mockups, wireframes or testing — set the size, colours and text, then download it as a PNG or copy it as a data URL you can paste directly into your code. Built for developers and content creators.
When you're building or testing a layout, you often need an image before the real one is ready — a thumbnail, a product photo, a user avatar. This tool generates a placeholder image right in your browser using the HTML canvas, with your chosen size, colours and text baked in.
You can download it as a PNG file, or copy it as a data URL — a self-contained image string you can paste directly into an `img` tag's `src` attribute without hosting a file anywhere.
Step 1 — Set the dimensions. Enter the width and height in pixels that match where the image will be used — a thumbnail, banner or avatar size, for example.
Step 2 — Pick your colours and text. Choose a background and text colour, then type in whatever label helps you identify the placeholder (like the dimensions or "Coming Soon").
Step 3 — Download or copy the data URL. Download the PNG for use as a real file, or copy the data URL to paste directly into your HTML or CSS.
Using data URLs for large images in production. Data URLs are great for quick mockups, but they bloat your HTML/CSS if used for large final images — swap in a real hosted file before shipping.
Forgetting to match aspect ratio. If you're testing a specific layout (like a 16:9 thumbnail), make sure your width and height match that ratio so the mockup reflects reality.
Low contrast between background and text. If the text and background colours are too close, the label will be unreadable in the preview.
A data URL embeds the actual image data as text directly in the URL, so it works without hosting a separate file — useful for quick mockups, emails or small icons.
Up to 1200 × 1200 pixels. This keeps generation fast since everything renders locally on an HTML canvas.
Yes — since it's generated entirely from your own inputs (colours and text), there are no licensing restrictions on the image itself.
No. The image is drawn and rendered entirely in your browser using the canvas element — nothing is sent anywhere.
Placeholder images let designers and developers move fast without waiting on final assets — testing layouts, spacing and load states before real content is ready.