URL-first placeholders
Create mock image URLs that are easy to paste into HTML, docs, markdown, prototypes, and component demos.
Image Placeholder
Image Placeholder Generator
Create custom image placeholders for mockups, docs, UI components, and prototypes with simple URLs and copy-ready developer snippets.
- Any size up to 4000 px
- Copy a URL, HTML, Markdown, or JSX
- PNG and SVG downloads
Quick modeAutosaves in this browser
Use it as a URL
A placeholder is just a link.
Put the size in the path and style it with query parameters. It works anywhere an image URL does: an<img>tag, Markdown, CSS, or a design mock. Images are SVG, so they stay sharp at any size.
| Parameter | What it does |
|---|---|
| /placeholder/600x400 | Width × height, up to 4000 each |
| text=Hello | The label; defaults to the size |
| bg=0f172a | Background colour, hex without # |
| color=f8fafc | Text colour, hex without # |
| style=dark | minimal, grid, gradient, dark, or glass |
| pattern=grid | plain, grid, diagonal, dots, or minimal |
| radius=24 | Corner radius in pixels |
| fontSize=48 | Text size; automatic when left out |
| brand=0 | Hides the small useSignal label |
Design-safe defaults
Start from clean colors, readable typography, and subtle patterns instead of loud placeholder blocks.
Snippets ready
Copy the direct URL, HTML image tag, Markdown image, React image, or CSS background snippet from one workspace.
Placeholder image URLs for real developer workflows
Create custom image placeholders for mockups, docs, UI components, and prototypes with simple URLs and copy-ready developer snippets.
Why use it
Why use this image placeholder generator
Create placeholder image URLs by size instead of hunting for throwaway assets during UI work.
Customize text, colors, radius, and subtle patterns so placeholders fit mockups and docs cleanly.
Copy direct URLs, HTML, Markdown, React, and CSS snippets from one browser-native workspace.
Save and share placeholder configurations when you want teammates to reuse the same mock image shape.
How it works
How placeholder URLs work
1 Choose a preset or enter custom width and height values.
2 Tune text, colors, pattern, and radius while the preview updates instantly.
3 Copy the direct /placeholder URL or a developer snippet for your component, README, or prototype.
Use cases
Placeholder image use cases
Generate Open Graph placeholders before final social preview artwork is ready.Create avatar, card thumbnail, banner, mobile screenshot, or desktop preview stand-ins.Paste stable placeholder URLs into documentation, storybook states, or UI mockups.Share a placeholder configuration with a teammate so both designs use the same image dimensions.Use custom placeholder images while testing layout behavior around aspect ratios and image loading.
FAQ
Image placeholder questions
Can I use the generated URL directly in HTML?
Yes. Copy the direct placeholder URL or the generated HTML img tag and paste it into your page, docs, or prototype.
Can I customize placeholder size and text?
Yes. You can set width, height, text, colors, border radius, and pattern style in the tool or with query parameters, then download PNG or SVG.
Does this require uploading images?
No. Image Placeholder generates lightweight placeholder images from URL settings, so there is no upload step.
Is this free to use?
Yes. The placeholder generator is free to use in the browser without login.
Can I share placeholder configurations?
Yes. Save or share a workspace link to restore the same placeholder size, text, colors, radius, and pattern later.
Is this an alternative to via.placeholder.com?
Yes. The URL API uses the same size-in-path pattern — /placeholder/300x200 — with extra query parameters for text, colors, radius, and pattern styling.