Placeholder Image Generator
Type a size like 1200x630 (or pick a preset — Open Graph, story, thumbnail, ad slots), choose background and text colors, optionally set a label, and download the placeholder as PNG or SVG. Everything is generated in your browser: this is a download tool, not a URL you hotlink.
Size, colors, and label
Preview & download
Everything is generated in your browser — this is a download tool, not an image-hosting service, so there is no URL to hotlink from your app.
Replace the placeholder with a real design
When the layout is ready, make the actual asset at the same size on a Moda canvas.
Try Moda free →A download tool, not an image URL service
Services like the old placeholder URL providers serve images from their servers, which means your mockup breaks when their domain does (several popular ones have died mid-project) and every render leaks a request to a third party. This tool takes the opposite trade: the image is built client-side and saved to your machine, so there is nothing to hotlink — and nothing that can disappear from under your prototype. Drop the file into your repo or design tool like any other asset.
PNG or SVG?
Download PNG when the placeholder must behave exactly like the final asset — image pipelines, CMS upload validators, and email clients all expect raster files, and the PNG is rasterized at the exact pixel dimensions you typed. Download SVG when the placeholder lives in a codebase or design file: it is a few hundred bytes regardless of dimensions, scales losslessly if the slot size changes, and the label stays editable as text. Both carry the same colors and label.
Why the presets are the sizes they are
The presets cover the dimension specs you most often need to mock before the real asset exists: 1200×630 is the Open Graph image size most link previews crop to, 1600×900 fits X/Twitter’s large summary card, 1080×1080 and 1080×1920 are Instagram’s square post and full-bleed story/reel, 1280×720 is YouTube’s thumbnail spec, and 728×90 and 300×250 are the two most common display-ad slots. Using the real dimensions from day one means your layout never reflows when the finished artwork lands.
Frequently asked questions
Can I hotlink these images from my app or mockup?
No — deliberately. Nothing is uploaded and no URL is created; the image exists only as the file you download. If you need an image at a URL, put the downloaded file wherever your project already serves assets from.
What sizes are supported?
Anything from 1×1 to 5000×5000 pixels. Type WIDTHxHEIGHT (the ×, x, or X separators all work) or a single number for a square. The label auto-sizes from the short side, then shrinks and wraps onto up to three lines when it is long, so even a long label stays inside banner shapes like 728×90.
Does the label support custom text?
Yes — by default the label is the dimensions (like "1200 × 630"), which is the most useful thing to see in a wireframe, but you can replace it with any text: "Hero image pending", a ticket number, or nothing meaningful at all. Special characters are escaped safely into the SVG.
Why would a placeholder ever need specific colors?
Two common reasons: matching the placeholder to your product’s surface color so mockups read at a glance, and testing layouts against dark backgrounds where the default light gray would glow. Contrast between the two colors is your call — a deliberately low-contrast placeholder recedes in a design review.