Placeholder Text and Image Generator

Filler text and images for layouts

Real content is rarely ready when a layout is. This page gives you the two things you need to keep working: believable filler text and placeholder images with the exact dimensions your design calls for.

Lorem ipsum text

1. Choose a unit: paragraphs, sentences, words or a bullet list.
2. Set how many you want. Paragraphs and sentences go up to 200, words up to 5000.
3. Pick plain text or HTML. HTML wraps paragraphs in p tags and lists in ul and li tags, ready to paste into a template.
4. Keep the classic opening line switched on if clients expect to see it, or switch it off for fully random text.
5. Press Shuffle for a new version, then copy or download.

Use words for headings and buttons, sentences for captions and short descriptions, and paragraphs for body copy. A list works well for feature grids and menus.

Placeholder images

Enter a width and height or tap a preset such as a 1600 x 900 hero or a 1200 x 630 social card. Pick a background and text colour, and either keep the size as the label or type your own words, for instance Hero image or Team photo. Naming placeholders helps developers and clients understand what should go where.

Download as PNG for a real file, or SVG for a lightweight vector. The code box gives you an img tag with the picture embedded as a data URI, so you can test a page without uploading anything.

Good practice

• Always set width and height on images in your HTML, even placeholders, to prevent layout shift.
• Use medium contrast colours so placeholders are visible but do not compete with the design.
• Replace placeholders before launch. Search your code for the word lorem and for data:image/svg to be sure none slip through.
• Generate text that is about as long as the real copy will be. Short filler hides problems that long words and long headings will cause later.

Privacy

Everything is generated locally in your browser.