RunLocalTools

Placeholder Image Generator — PNG, SVG & Data-URI, Free

Generate placeholder images at any size — solid, gradient, striped, checkerboard, or noise backgrounds, with dimension-labeled text. Export PNG/JPEG/WebP, copyable SVG, or a paste-ready data-URI. Free, runs entirely in your browser.

What it does

This tool generates a placeholder box at any width and height you need for a mockup, wireframe, or “coming soon” image slot — labeled with its own dimensions by default, or any text you choose. Unlike most placeholder generators, it isn’t limited to a flat gray rectangle: pick from solid, gradient, diagonal-stripe, checkerboard, or noise/speckle backgrounds, add rounded corners or a border frame, and export it as a raster image, copyable SVG source, or a data-URI you can paste straight into an src attribute with no download step at all.

How it works

Every setting redraws live, so you’re always looking at the actual output rather than a separate preview. The text field supports simple tokens — {width}, {height}, and {ratio} — so a template like {width} × {height} ({ratio}) automatically relabels itself whenever you change the size, without retyping anything.

Four of the five background patterns (solid, gradient, stripes, checkerboard) generate real, editable SVG markup alongside the raster canvas — using SVG <pattern> and <linearGradient> primitives rather than an embedded bitmap, so the SVG stays small and crisp at any size. The noise/speckle pattern is randomized per-pixel and only makes sense as a raster image, so it’s PNG/WebP-only; the tool disables the SVG export automatically when noise is selected and explains why.

How to use it

  1. Pick a size from the preset dropdown (common social, ad, and device sizes are grouped for you), or type a custom width and height — lock the aspect ratio first if you want one dimension to follow the other.
  2. Choose a background pattern and its colors, and adjust the text template, corner radius, and optional border to taste.
  3. Download the result as PNG, JPEG, or WebP — or copy the live SVG source, or copy it as a data-URI to paste directly into your HTML or CSS.
  4. Need several sizes at once? Check off any presets in the Bulk generate list and download them all together as a zip, using the same style settings.

FAQ

What’s the advantage of the SVG or data-URI output over just downloading a PNG? An SVG placeholder is a few hundred bytes instead of tens of kilobytes, scales perfectly at any size, and — as a data-URI — can be pasted directly into an <img src="data:..."> or CSS background-image with no file to host at all. That’s especially handy for placeholders that only ever live in prototype code.

Can I use my own image inside the placeholder instead of a colored background? No — this tool generates synthetic placeholder graphics (colors, patterns, and text) rather than compositing an uploaded photo. If you want to frame or label an existing image, the Border & frame adder is the better fit.

Does the noise/speckle pattern look the same every time? No — it’s randomized on each redraw, so regenerating (or nudging any other setting) gives you a slightly different speckle pattern each time.

How big can I make the image? Width and height each go up to 8000px. Very large canvases with noise or checkerboard patterns take a moment longer to render since everything happens in your browser rather than on a server.

Can I match a specific brand color exactly? Yes — the color pickers accept any hex value, so if you already have exact brand hex codes, paste them straight in. For picking a color from an existing image or generating a palette from scratch, try the Color picker tool first.

I need this as a favicon-sized image instead — is that here? For an actual browser favicon (with the right multi-size ICO packaging), use the dedicated Favicon generator instead — this tool is aimed at mockup and layout placeholders rather than favicon output.