Placeholder Image Generator
Generate placeholder images with custom dimensions, colors, rounded corners, and text in PNG, JPEG, or WebP. Download or embed inline.
About this tool
A placeholder image generator draws a flat-color rectangle of any width and height, with optional centered label text, and exports it as PNG, JPEG, or WebP. Designers and developers use these wherever a real image is not ready yet — wireframes, mockups, responsive-layout testing, or staging sites that must look populated before launch.
Set width × height (1–2000 px), pick background and text colors, type an optional label such as Hero 600×400, choose a format, and the preview updates instantly. The Radius field rounds the corners — set it to half the smallest dimension and click Circle for a perfect circle (useful for avatar placeholders). You can download the file, copy a direct <img src> tag, copy Markdown, or grab a self-contained base64 data URI for embedding in HTML or CSS without any external file.
Example: width 1200, height 630, background #0f172a, text OG Preview produces a 1200×630 dark banner you can drop straight into an Open Graph og:image slot during development. The Share button copies a URL that restores the exact dimensions, colors, radius, and text.
FAQ
What is the largest image I can generate? ›
Up to 2000×2000 pixels. This keeps rendering fast in your browser and prevents excessive CPU usage when generating PNG images through the API.
What format should I pick? ›
PNG for crisp text and transparency, JPEG for the smallest file size when the background is a flat color, and WebP for the best compression with good quality on modern browsers.
Can I make a round or circular placeholder? ›
Yes. Enter a Radius value equal to half the smallest dimension (e.g. radius 50 for a 100×100 image) and the canvas clips to a rounded rectangle. Click the Circle button to set this automatically for a perfect circle — great for avatar placeholders.
Can I share the exact image configuration? ›
Yes. Click the Share button to copy a URL that restores all dimensions, colors, radius, and text. Open it in any browser and the same placeholder appears, with all settings pre-filled.
Can I embed the image without hosting a file? ›
Yes. Click "Copy Data URI" to get a base64-encoded string you can paste directly into <img src="..."> or a CSS url(). The image lives entirely inside your HTML — no external request needed.
Why does my downloaded image look slightly blurry? ›
This tool draws at exact pixel dimensions with no upscaling. If a high-DPI screen scales the preview, the underlying canvas is still 1:1 with the values you entered; the downloaded file matches those dimensions exactly.
Can I use this programmatically via an API? ›
Yes. The same placeholder image rendering is available as a public HTTP endpoint at /api/placeholder. Pass width, height, colors, and text as query parameters — it returns an SVG or PNG you can use directly in <img src="...">. See the <a href="/api/" class="text-accent hover:underline">API reference</a> for full documentation.