How do I create a placeholder image of an exact size?

Type the Width (px) and Height (px), pick colors or a Color theme, then click Download PNG, Download JPG or Download SVG. By default the image shows its dimensions, such as 800 x 600, as the label.

What is the largest placeholder image I can generate?

Width and height must each be between 1 and 4000 pixels. Values outside that range show the error Width and height must be between 1 and 4000 px.

How do I put a placeholder image directly in HTML without a file?

Click Copy as data URL and paste it into an img tag as the src value. You can also use Copy HTML snippet or Copy CSS background. No external image host is needed.

Can I generate standard social media or web sizes?

Yes. Preset sizes include Instagram post, Instagram story, Twitter card, Open Graph, YouTube thumbnail, Facebook cover and Email header. Download all presets (ZIP) saves all eleven as PNG files.

How do I put my own text or diagonal lines on the placeholder?

Type a label in Custom text, for example Hero image, instead of showing dimensions. Tick Show diagonal lines (X) to draw faint diagonals. Long text shrinks automatically to fit the width.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install.

🖼️

Free Placeholder Image Generator

Generate colored placeholder images with custom dimensions, text, and colors. Standard sizes for social media, mockups, and design comps.

Runs in your browserNo sign-up, no pop-upsNo login requiredFree forever

Width (px)

Height (px)

Preset sizes

Color themes

Background

Text / lines

Custom text (leave blank for dimensions)

Show dimensions if no custom textShow diagonal lines (X)

💡 For HTML mockups: use the "Copy as data URL" option and paste into <img src="..."> for inline placeholders. For Figma / Sketch designs, download the PNG and drag in.

Common uses

Placeholder Images for Design MockupsGenerate sized colored boxes for use in Figma, Sketch, or web design mockups before real images are ready.
Inline Placeholders for HTML PrototypesUse "Copy as data URL" to inline placeholder images directly in HTML for quick prototypes.
Placeholders for CMS Content SlotsWhen demoing a CMS template, use placeholder images instead of real content for sensitive previews.
Social Media Image TemplatesGenerate correctly-sized placeholders for Instagram, Facebook, Twitter, LinkedIn post templates.
CSS Layout Testing ImagesGenerate images at extreme aspect ratios to stress-test responsive CSS layouts.

How It Works

Everything happens in your browser using the HTML Canvas API and hand-written SVG markup — no server, no upload, no third-party service. You set dimensions, colors, and label text, and the tool paints the image directly onto a canvas element in real time, then serializes it to PNG, JPEG, or SVG on demand.

1
Configure dimensions and colors
Type a width and height (1–4000 px each), or pick one of eleven presets covering common social media and design sizes. Choose a background and text color from the built-in themes or enter any hex value directly; a native color picker and a validated text field stay in sync.
2
Canvas API renders the preview instantly
A React effect calls drawPlaceholder() on every change. This function uses CanvasRenderingContext2D to fill the rectangle with the background color, optionally draw faint diagonal cross-hair lines at 15% opacity, then measure and center-align your label text — auto-shrinking the font until it fits within 90% of the canvas width.
3
Export as PNG, JPEG, or SVG
PNG and JPEG downloads call canvas.toDataURL(), convert the base64 result to a Blob in memory, and trigger the download — all synchronously inside the user gesture so iOS Safari's download rules are satisfied. SVG export builds a self-contained SVG string with a matching rect, optional diagonal lines, and a text element, then saves it as a .svg file.
4
Batch export and copy shortcuts
The 'Download all presets' button dynamically imports JSZip, re-renders each of the eleven preset sizes onto an off-screen canvas using the same draw function, and packages all PNGs into a single ZIP. Copy buttons emit a PNG data URL, an inline SVG img tag, or a CSS background-image declaration for immediate paste into code.