How to Generate Placeholder Images — Free Online Tool (2026)

You can generate placeholder images at any size and colour for free using brevio Placeholder Image Generator. Set width, height, background colour, text colour, and optional label — the image is rendered on HTML Canvas in your browser and downloads as a PNG.

How to Generate a Placeholder Image

1. Open brevio Placeholder Image Generator. No account needed.
2. Set the width and height in pixels. Values from 1 to 4096px are accepted.
3. Choose a background colour using the colour picker or by typing a hex code.
4. Choose a text colour for the dimension label or your custom text.
5. Optionally enter custom text. If left blank, the label defaults to "W×H" (e.g., "400×300").
6. Click "Download PNG" to save the placeholder.

Common standard sizes for placeholder images

Using placeholder images in HTML

During development, placeholder images can be referenced by URL (using services like https://placehold.co/400x300) or embedded as local files. Using a local file from this tool avoids external network requests and works offline. Reference a downloaded placeholder in HTML as:

<img src="placeholder-400x300.png" alt="Product image placeholder" width="400" height="300" />

Adding explicit width and height attributes prevents layout shift (CLS) while the real image loads, which improves Core Web Vitals.

Alternative: CSS-only placeholder approach

For web development, a CSS placeholder avoids any image file entirely:

.placeholder {
  width: 400px;
  height: 300px;
  background: #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 14px;
}
/* Usage: <div class="placeholder">400×300</div> */

This approach is better for live development previews. Use an actual placeholder PNG when you need a file to commit to the repository, share in a design file, or use in a Figma prototype.

Frequently Asked Questions

Can I use transparent backgrounds?

Yes — set the background colour to a fully transparent value. The colour picker does not expose an alpha channel directly, but you can type a hex with alpha in formats that support it, or simply use white (#ffffff) and treat it as transparent in your compositor. The downloaded PNG will have the exact background colour you specified.

What is the maximum image size?

The tool supports up to 4096×4096px. Beyond that, some browsers may fail to allocate the canvas. For very large images (poster size, print-ready assets), use a vector format like SVG instead — SVG scales infinitely without rasterisation.

Is there a limit on how many placeholders I can generate?

No — the tool runs entirely in your browser and there are no usage limits, quotas, or accounts.

Can I generate SVG placeholders?

This tool outputs PNG only. For SVG placeholders, you can write one manually in a text editor: <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="#cccccc"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#555">400×300</text></svg>