Placeholder Image Generator

How to use

1. 1Pick a size preset (Hero, Open Graph, YouTube thumb, Instagram square, banner, leaderboard, and more) or type custom width and height in pixels.
2. 2Pick a palette, or open the colour pickers to set a custom solid or gradient background and a text colour. Use Auto-pick to set a contrasting text colour from the background.
3. 3Choose a label mode: dimensions (e.g. 600 x 400), a custom string, or no label. Optionally add a grid, dots, or diagonal pattern, plus an inner border.
4. 4Pick PNG for crisp text or JPG with a quality slider for a smaller file. Click Download to save the placeholder, or use Copy data URL for an inline data URI.
5. 5Copy the ready-made HTML img, Markdown, or JSX snippet to paste the placeholder straight into a layout, README, or React component.

About this tool

Placeholder Image Generator creates simple, attractive placeholder images at any custom size and downloads them as a PNG or JPG, all in your browser. Type any width and height between 16 and 4000 pixels, or pick from common sizes (avatar, blog thumb, hero, Open Graph, YouTube thumbnail, Instagram square and portrait, story, banner, leaderboard, Full HD), and the live canvas redraws instantly. Choose from ten built-in palettes (Slate, Ash for the classic placeholder.com look, Ocean, Sunset, Forest, Violet, Candy, Midnight, Paper, Noir) or fine-tune the colours with the colour pickers; switch between solid and diagonal gradient backgrounds, and tap an Auto-pick button to set a contrasting text colour from the background luminance. The label can show the live image dimensions, any custom string you type (handy for naming hero, sidebar, gallery 1, etc. in design comps), or no label at all. An optional subtle pattern overlay (grid, dots, or diagonal lines) and an optional inner border give the placeholder enough texture for low-fidelity wireframes without distracting from the layout. Pick PNG for crisp text or JPG with a quality slider when you want a smaller file. Download the file with one click, copy the data URL straight to your clipboard, or copy a ready-to-paste HTML img tag, Markdown image, or JSX img tag with the dimensions baked in. The image is rendered with the Canvas 2D API; the file you download is the same pixels you see in the preview, and nothing is uploaded to a server. Useful for designers prototyping a layout before final photography exists, frontend developers stubbing image slots, content editors filling a CMS draft with the right aspect ratios, marketers reserving social card space, and anyone who has ever needed a quick image at a specific size with a clear label so review feedback stays on the layout instead of the missing photo.

Free to use. Works in your browser. No signup, no login.