Set a width, height, background, text colour and label, and this generator draws a placeholder in your browser. Download it as PNG, JPG or WebP, or copy a tiny SVG data URL to paste straight into an img tag or CSS, so your mockup never depends on a third-party image service.
| Format | Best for | Notes |
|---|---|---|
| SVG data URL | Prototypes and code samples | No file, no request, sharp at any zoom |
| PNG | Design files, uploads to a CMS | Lossless, every browser supports it |
| JPG | Places that reject PNG | Lossy, no transparency |
| WebP | Testing real page weight | Lossy here, small files |
Updated
Hosted placeholder services are handy until one goes down or gets blocked by a network filter, and then every grey box in your demo breaks. This tool makes the image locally instead: you get either a real file or a self-contained SVG string that lives inside your code.
Choose a size, colours and an optional label. Copy an SVG data URL or img tag, or download PNG, JPG or WebP made in your browser.
| Use | Width | Height |
|---|---|---|
| Open Graph card | 1200 | 630 |
| Hero, 16:9 | 1920 | 1080 |
| Blog thumbnail | 800 | 450 |
| Square post | 1080 | 1080 |
| Portrait story | 1080 | 1920 |
| Avatar | 256 | 256 |
| Product photo, 4:5 | 1000 | 1250 |
| Leaderboard banner | 728 | 90 |
The same 640 by 360 grey box used twice: once as an image source, once as a CSS background.
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360'%3E%3Crect width='100%25' height='100%25' fill='%23e5e7eb'/%3E%3Ctext x='50%25' y='50%25' fill='%234b5563' font-family='system-ui, sans-serif' font-size='72' text-anchor='middle' dominant-baseline='central'%3E640 × 360%3C/text%3E%3C/svg%3E" width="640" height="360" alt="Placeholder 640 by 360" style="max-width:100%;height:auto" />
<div style="margin-top:8px;height:40px;background:#e5e7eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Crect width='100%25' height='100%25' fill='%23e5e7eb'/%3E%3Ctext x='50%25' y='50%25' fill='%234b5563' font-family='system-ui, sans-serif' font-size='8' text-anchor='middle' dominant-baseline='central'%3EBanner%3C/text%3E%3C/svg%3E") center/contain no-repeat"></div>A good placeholder has the same aspect ratio as the final image. If the hero will be a 16:9 photo, prototype with 1920 by 1080, not a square, or the layout you approve will crop badly later.
Write the intended size on the box. Designers, writers and photographers can then see what to deliver without opening the code.
A data URL puts the image bytes in the src itself. For a small SVG that is cheaper than a network request and makes the snippet portable: paste it anywhere and it renders.
For anything you will upload to a CMS, store in a design file, or keep around, download a real file instead. Long data URLs are hard to read in code review.
No. A downloaded file is yours, and an SVG data URL is just text inside your page, so there is no server behind it that could disappear.
JPEG has no alpha channel. Every placeholder here has a solid background anyway, but pick PNG or WebP if you edit the file later and need a transparent area.
Yes. Wrap it in url("...") inside background-image. The tool already swaps double quotes for single ones and encodes #, < and > so the string survives inside CSS and HTML attributes.
Canvas export to image/png is required of every browser, while JPEG and WebP are optional. If a browser cannot make WebP, it quietly returns a PNG, and the file name here will say so.
Related: Avatar placeholder generator, Open Graph image generator, HTML images guide, Image compressor, Website image sizes.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.