Pick a size, colors and label, and get a clean placeholder image instantly — download the PNG or copy the data URL and a ready-to-paste <img> snippet.
Pick a preset or enter a custom size.
Updates instantly as you change settings.
Use a common preset or set an exact custom width and height in pixels.
Choose the background and text color so the placeholder fits your mockup or layout.
The image is drawn with canvas locally. Nothing is generated by or uploaded to a server.
Create quick placeholder graphics for wireframes, mockups, prototypes and layout testing.
Placeholder graphics let designers and developers block out a layout before real photos or assets are ready. This generator draws a flat-color rectangle with centered, auto-sized label text directly on a canvas element, matching the familiar look of hosted placeholder services without needing a network request.
Leave the label field empty and the placeholder text automatically shows its own width and height, a common placeholder convention.
Type your own text instead, useful for labeling sections, states or component names in a wireframe.
Download a real PNG file, or copy a self-contained data URL and HTML snippet to embed directly in code without hosting an image file.
Because everything renders locally, there is no waiting on a remote placeholder service and no external image request in your project.
Choose from common presets like 300x200, 600x400, 1200x630 and 1080x1080, or enter any custom width and height in pixels.
Yes. Type any label you want. Leave the text field empty and the placeholder will automatically show its own dimensions, like 600 x 400.
Download the PNG file directly, or copy the generated data URL or example img HTML snippet and paste it straight into your code.
Yes. The image is drawn entirely with the canvas API in your browser. No image is uploaded or generated by a remote server.