Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
Mockups and prototypes often need placeholder images before real content is ready — a simple labeled box showing the exact dimensions is usually all that's needed.
This generator creates a custom-sized placeholder image as a scalable SVG, labeled with its dimensions or custom text.
How it works
Enter the width and height you need, plus optional custom text and colors. The generator builds an SVG canvas of exactly those dimensions, fills it with the background color, and centers the label text — defaulting to showing the dimensions themselves if no custom text is given.
- Enter the width and height you need in pixels.
- Optionally set custom text and colors.
- Generate the placeholder, then copy the SVG or download it.
Examples
300×200 placeholder
A 300×200 placeholder image automatically labels itself "300 × 200" if no custom text is provided, making it immediately clear what size slot it represents in a mockup.
Who should use it
- Filling empty image slots in a website or app mockup during development.
- Testing a responsive layout's image sizing before final assets are ready.
Industry applications
- Web and app development
- UI/UX design and prototyping
Advantages
- Generates instantly for any custom width and height.
- Produces a lightweight, scalable SVG rather than a heavier raster image.
Limitations
- Limited to simple solid-color-with-text placeholders — doesn't support gradients, patterns, or photo-style mockup content.
Common mistakes to avoid
- Using an unreasonably large placeholder size for a small UI element, making the SVG unnecessarily heavy.
- Choosing text and background colors that are too similar, making the label hard to read.
Best practices
- Let the default dimension-label text stand in most cases — it's immediately useful for confirming layout sizing during development.
Tips
- Match your placeholder dimensions to your actual final image slot size — this catches layout and aspect-ratio issues early, before real content is dropped in.