Placeholder Image Generator
Generate crisp placeholder images live — any size, custom text, colors and patterns. Export as scalable SVG or PNG/JPEG/WebP, or copy a ready-to-paste data URI, <img>, CSS or Markdown snippet. All in your browser.
About this ToolHow it works, benefits & use casesTap to collapse
Generate crisp placeholder images at any size, with a live preview that updates as you adjust them. Set an exact width and height (or lock the aspect ratio to scale both together), and jump to a preset from the Common, Social, and Ads (IAB) groups — OG image, Instagram square, leaderboard, medium rectangle, and more. Customize the label text (or let it auto-show the dimensions), pick background, text, and accent colors, choose a pattern (solid, gradient, grid, diagonal, dots, or cross), set a font size or leave it auto, and toggle an inner border. The core output is a scalable SVG, which the tool can also rasterize to PNG, JPEG, or WebP. Copy the SVG code, or grab a ready-to-paste snippet as a data URI, an <img> tag, a CSS background rule, or Markdown — all inline with no network request. Everything runs in your browser.
How to Use
- 1Set the Width and Height, or click the lock toggle to keep the aspect ratio while you resize; pick a preset for common sizes.
- 2Type a label under Appearance (or leave it blank to auto-show the dimensions), and choose a pattern.
- 3Adjust the background, text, and accent colors, set a font size (0 = auto), and toggle the inner border.
- 4Watch the live preview, then choose a format (SVG, PNG, JPEG, WebP) and click Download, or “Copy SVG code”.
- 5Switch the “Code snippet” dropdown to a Data URI, HTML, CSS, or Markdown snippet and copy it for instant use.
Key Benefits
- Scalable SVG output, with raster export to PNG, JPEG, or WebP
- Six patterns — solid, gradient, grid, diagonal, dots, and cross
- Preset sizes for common layouts, social images, and IAB ad units
- Aspect-ratio lock to scale width and height together
- Copy-ready snippets: data URI, <img> tag, CSS background, or Markdown
- Custom label, colors, font size, and an optional inner border
- Inline output with no network request — and everything runs in your browser
Common Use Cases
- Filling layouts with sized placeholders while real images are still being produced
- Generating an exact 1200×630 OG image stand-in for social preview testing
- Creating IAB ad-unit placeholders (leaderboard, medium rectangle) for mockups
- Producing inline data-URI placeholders that avoid an extra HTTP request
- Mocking avatars, cards, and hero images with labeled dimensions during development
Dimensions
Common
Social
Ads (IAB)
Appearance
Pattern
1200 × 630 · SVG is scalable & ~144 bytes
Inline placeholder — no network request. Pipe the data URI to URL-encode it for CSS.
data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22630%22%20viewBox%3D%220%200%201200%20630%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23E2E8F0%22%2F%3E%3C%2Fsvg%3E
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- URL Encoder/DecoderEncode and decode URL strings
- Lorem Pixel GeneratorGenerate placeholder image URLs
- Changelog GeneratorGenerate changelog from Git commit history
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
- Heroku Procfile GeneratorBuild a Heroku Procfile and matching app.json — process types, env vars, addons, dyno formation — plus a Procfile parser and audit
- Markdown TOC GeneratorGenerate table of contents for Markdown
The core output is an SVG, which is vector and scales to any size without blurring. You can also rasterize it to PNG, JPEG, or WebP from the format dropdown if you need a fixed-resolution file. The raster versions are drawn from the same SVG, so they match exactly.
You can choose solid, gradient, grid, diagonal, dots, or cross. For every pattern except solid, an accent color control appears so you can tune the secondary color used by the gradient or pattern overlay.