Placeholder image generator

Building a layout before the real photos arrive? Use a placeholder image: a solid-color image of the exact size you need with its dimensions printed in the middle. Design the URL below and copy it into your HTML, CSS, Figma or test data.

Square 1:1 600×600Thumbnail 150×150Landscape 3:2 600×400HD 16:9 1280×720Open Graph 1200×630Banner 728×90Sidebar ad 300×250Avatar 96×96Portrait 4:5 1080×1350

Width (px)Height (px)Text (optional)BackgroundText color

Format

SVGPNG

Image URLCopyHTMLCopyMarkdownCopyOpen image in a new tab →

URL format

https://imgdrop.dev/api/placeholder/{width}x{height}[.png]?bg={hex}&fg={hex}&text={label}

/api/placeholder/600x400                 600×400 SVG, gray
/api/placeholder/1200x630.png            Open Graph size, PNG
/api/placeholder/300?bg=0ea5e9&fg=fff    300×300, blue with white text
/api/placeholder/728x90?text=Ad+space    leaderboard banner with a label

Common placeholder sizes

Tips

• Always set width and height on the <img> so your layout doesn’t shift when real images replace the placeholders.
• Use a label (?text=Hero) to mark what each slot is for in mockups.
• Colors accept 3- or 6-digit hex without the #.

Need to host a real image?

Upload it here and get a direct link in seconds.

• Image to URLTurn any picture into a shareable link.
• Image link generatorLinks plus HTML, Markdown and BBCode.
• Image URL generatorA direct .png/.jpg URL — also via curl.
• Images for DiscordLinks that embed in chats and bots.
• Images for forumsReady-made [img] BBCode.
• Temporary image hostingLinks that delete themselves.