Image Placeholder Generator

What this tool does

It generates a placeholder image — a solid or gradient background with a centered label — as SVG, ready to drop into a mockup, a wireframe, a CMS entry, or a <img> tag while the real asset isn't ready yet. By default the label shows the image's own dimensions (800 × 600), so a page full of placeholders tells you at a glance which box is which size. Because the output is SVG rather than a raster image, it stays perfectly sharp at any zoom level and the file is tiny — a few hundred bytes for a solid-color box, no matter how large you set the width and height.

How to use it

1. Set the width and height in pixels (up to 4000px each).
2. Pick a background: a flat color, or a linear gradient with its own start color, end color and angle.
3. Leave the text as the default dimensions, or turn on custom text and type your own label (a client name, "Hero image", "Coming soon" — anything).
4. Adjust the text color and font size, and optionally turn on a border with its own color and width.
5. Copy the SVG source or download it as a .svg file — the preview updates as you change any setting.

Why SVG instead of PNG or JPG?

A placeholder's whole job is to hold a box's shape and size before the real content arrives, and SVG does that better than a raster image ever could: it renders crisp at 100px or 10,000px wide from the same handful of bytes, it's copy-pasteable as plain markup (handy for embedding directly in HTML/CSS without hosting a file), and most tools that accept an image — browsers, design tools, static site generators — accept SVG natively. If you specifically need a raster file, load the downloaded SVG into any image editor or an <img>-to-canvas step and export from there; the SVG itself is the source of truth either way.

Can I use this for real layouts, not just mockups?

Yes — point an <img src="placeholder.svg"> at the downloaded file, or inline the SVG markup directly in your HTML, and it behaves like any other image: it scales with width/height or CSS, and browsers cache it like any static asset. Because it has no external dependency (no third-party placeholder service to go down or rate-limit you), it's also safe to ship in a production fallback state rather than just local development.

Is my data private?

Yes. Everything happens in your browser — the SVG is built locally from the settings you choose, with no upload, no account and no server round-trip. Nothing you type (including any custom text) ever leaves your device.

Does the text auto-resize to fit the box?

No — the font size is a setting you control directly, not an automatic fit. For very long custom text on a small or narrow placeholder, lower the font size until it reads clearly; for the default WIDTH × HEIGHT label, the number of digits is usually short enough that the default 48px size fits comfortably on anything larger than a small thumbnail.