Generate custom placeholder images with any size, color and text. Perfect for mockups, wireframes and development.
Use placeholders while building layouts. They show exact dimensions so you know images will fit perfectly.
Fill wireframes and mockups with properly-sized placeholder images before real content is ready.
Create clean placeholder visuals for slides when actual images aren't available yet.
If you've ever built a website or designed an app, you know the feeling: the layout is ready, the typography is dialled in, the spacing looks right — but the real images aren't ready yet. Maybe the client hasn't sent them. Maybe the photographer is still shooting. Maybe you're just sketching out the idea and don't want to waste real assets on a draft nobody will see. That's when placeholder images earn their keep.
A good placeholder lets you keep building without breaking flow. It fills the slot, holds the right dimensions, and signals to anyone looking at the work-in-progress that "yes, an image goes here, no, this gray box isn't the final version." A bad placeholder — or worse, no placeholder at all — leaves you with broken image icons, collapsed grid cells, or designs that look weirdly empty until the real assets arrive a week later.
This generator produces clean, consistent placeholders in any size and any color, with optional dimension text right on the image so you can tell at a glance what space the image is meant to fill. Drop them into HTML, CSS background-images, design comps, Figma frames, anywhere you'd otherwise have a missing-asset gap.
Type in the width and height you need. Common sizes worth knowing by heart: 1200×630 for social sharing cards, 1920×1080 for hero images, 600×400 for blog featured images, 300×300 for square avatars or product thumbnails, 16:9 or 4:3 aspect ratios for video placeholders. The tool doesn't lock you to any size — type whatever your layout calls for.
The default is a neutral light gray that looks at home in almost any design. If you want something more distinct, pick a brand color, a contrasting accent, or a deliberately ugly bright color so nobody mistakes the placeholder for the final asset. The text-on-image automatically adjusts contrast to stay readable.
You get a PNG you can save and use anywhere — drag it into a Figma file, drop it into your HTML with a normal <img> tag, or use it as a CSS background. The image is generated in your browser, so it's instant and works offline.
If you've been in development for any amount of time, you've probably used services like placehold.it, placeholder.com, or Lorem Picsum. They work, they're convenient, but they all have the same problem: your placeholder is hosted on someone else's server. That sounds harmless until you ship a project, forget about the placeholder, and three years later the placeholder service shuts down or starts rate-limiting and suddenly your site shows broken images everywhere. It's happened to a lot of teams.
Generating placeholders as actual files solves this. You get a PNG that lives in your project or your design file. No network call, no dependency on a third-party service that might disappear, no privacy risk of leaking what designs you're working on to an external host. Your placeholder is just a file like any other.
This also makes the workflow faster on slow networks, on planes, in coffee shops with terrible WiFi, and in any environment where you can't or shouldn't rely on external image services. The generator runs entirely in your browser. No upload, no API call, no waiting on a server somewhere.
Wireframing and design mockups. When you're laying out a page in Figma, Sketch, or Adobe XD, you need image placeholders that hold space and don't visually distract from the layout decisions you're trying to make. Plain colored rectangles with dimension text are perfect — neutral enough not to bias your design, descriptive enough to know which slot is which.
Front-end development before assets exist. You're building a card component that needs a 600×400 image. The client's photos won't be ready for two weeks but you need to demo the layout tomorrow. A placeholder image fills the space, lets the CSS work correctly, and looks intentional rather than broken.
Tutorials, blog posts, and documentation. Teaching someone how to build a layout? Use placeholders so readers focus on the code, not the photo content. Same for documentation screenshots where the actual content is irrelevant.
Performance testing. Sometimes you need to test how a page behaves with many images loaded — for example, an image-heavy product grid. Generated placeholders at known sizes let you reason about layout performance independent of image content.
A/B testing layout changes. When you're testing two layouts that differ only in image placement, using identical placeholders removes the variable of "did this layout win because the photos were better?"
Avatars and profile pictures for demos. Building an authentication flow demo or a chat app? Use solid-color placeholders instead of stock photos of strangers. Cleaner, fewer licensing questions, no accidental "this person looks like a real customer" weirdness.
Use realistic dimensions, not round numbers. If your final image will be 800×512, generate a 800×512 placeholder rather than 800×500. Same for design assets — match the real-world ratio so the placeholder behaves identically to the final.
Add dimension text when reviewing layouts. When the placeholder shows "600 × 400" on it, anyone reviewing the layout can immediately see what the slot is supposed to hold. This catches mistakes early.
Make placeholders visually distinct from final assets. A medium-gray placeholder is fine. A bright magenta placeholder is even better — there's zero chance anyone reviewing the work mistakes it for the real photo.
Generate a full set early. If your design has 12 image slots in different sizes, generate all 12 in one session and save them with descriptive filenames (hero-1920x1080.png, card-600x400.png, etc.). This is much faster than generating each one on demand.
Use neutral colors for "production-like" comps. When the client wants to see what the layout looks like "for real," neutral gray placeholders feel less interruptive than colored blocks. Save the bright colors for internal review.
Once you've downloaded a PNG, using it is as simple as any other image. In HTML: <img src="placeholder-600x400.png" alt="Product image">. In CSS: background-image: url('placeholder-600x400.png');. In React: <img src={placeholder} /> after importing. Same for Vue, Svelte, Angular, or any framework.
For a really tidy dev workflow, keep a folder of pre-generated placeholders in your project (something like /src/assets/placeholders/) and import them by name. When the real asset arrives, swap the filename and you're done.
For Figma or Sketch, just drag the PNG into the canvas and it'll get treated as an image fill. You can mask it into shapes, apply effects, or replace it with the final asset later by dragging the new file on top.
Everything you might want to know before you use the tool.
A placeholder image is a temporary dummy image used during web development, mockups or wireframing. It shows dimensions and can have custom text.
Yes! Generated placeholder images are yours to use however you like — development, mockups, presentations.
Download as PNG or JPG. You can also copy the image data directly.
Up to 4000×4000 pixels in your browser. For most layouts that's massive overkill — common web sizes top out around 1920px on the long edge. The bigger the dimensions, the larger the PNG file, so don't generate 4000×4000 if you really only need 800×600.
The current version shows dimension text by default. We're working on a custom-text option for the next update — useful for things like 'Photo coming soon' or labeling specific image slots by name.
Placeholders should not be on a live, published site — they're for design and development phases only. Once the site goes live, real images need to be in place because Google indexes images and placeholders provide no useful content.
No. The PNGs are simply rendered pixels — there are no licensing strings attached. Use them anywhere, anytime, commercially or otherwise.
You can absolutely draw a rectangle in Figma. The generator is useful when you need a real PNG file (for code, for testing, for sharing outside the design tool) at a precise size with consistent styling. If you're just laying things out in Figma, a rectangle is fine.