Skip to main content
DevStackKit
All tools

Placeholder Image Generator

Create a placeholder image with your own size, text and colours. Download it as SVG, PNG or WebP, or copy it as a data URI or an img tag. Free and private.

More options

Preview

Placeholder 1200 by 630

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-label="1200 × 630"><rect width="100%" height="100%" fill="#cbd5e1"/><text x="50%" y="50%" fill="#334155" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif" font-size="113" text-anchor="middle" dominant-baseline="central">1200 × 630</text></svg>

Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)

Free Online Placeholder Image Generator

Make a plain image of any size with your own text and colours for mockups, demos and tests. Download it, or copy it as a data URI or an img tag. It gives developers a quick browser-based way to solve a focused placeholder image generator task before moving the result into a project.

How to make a placeholder

Enter the width and height, the text (or leave it empty to show the size) and the two colours. The preview updates as you type. Pick a format and press Download.

Using it without a file

Copy the data URI or the img tag to use the image directly in HTML or CSS with no file to host.

Common mistakes

  • Making a huge PNG for a small slot: SVG scales to any size at a tiny file size.
  • Low contrast between text and background: pick colours that stay readable on small screens.

Frequently asked questions

Why use a placeholder image?
In mockups and early builds, a grey box with its size on it keeps layouts honest before the real photos arrive.
What is a data URI?
The whole image written as text inside the URL, so it needs no file or server. Paste it into src="…" or CSS url(…). Short for SVG, but long for PNG.
Which format should I download?
SVG is tiny and sharp at every size. PNG works everywhere, including places that do not accept SVG, such as some email clients and upload forms. WebP is smaller than PNG.
Is anything uploaded?
No. The image is drawn in your browser.
How do I use this placeholder image generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.

More Frontend & Design

User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back

View all Frontend & Design tools →