cssgridgen

Placeholder Image Generator

Self-contained SVG. No external service, no HTTP request.

Open in

640×360 · 0.8 KB data URI

label contrast 3.81:1 — legible.

No external service. The image is an inline SVG data URI, so it works offline, costs no HTTP request, and cannot break when someone else's placeholder host goes down.

<img
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360' role='img' aria-label='640%C3%97360 placeholder'%3E%3Crect width='640' height='360' rx='12' fill='%23e4e4e7'/%3E%3Cpath d='M 282.2 122.4 L 357.8 122.4 L 357.8 181.2 L 282.2 181.2 Z' fill='none' stroke='%2371717a' stroke-width='6.72' stroke-linejoin='round'/%3E%3Ccircle cx='305.3' cy='141.3' r='7.56' fill='%2371717a'/%3E%3Cpath d='M 282.2 168.6 L 307.4 147.6 L 328.4 164.4 L 341.0 153.9 L 357.8 168.6' fill='none' stroke='%2371717a' stroke-width='6.72' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='320' y='247.4' fill='%2371717a' font-family='system-ui%2C sans-serif' font-size='20' font-weight='500' text-anchor='middle' dominant-baseline='middle'%3E640%C3%97360%3C/text%3E%3C/svg%3E"
  width="640"
  height="360"
  alt=""
/>
Free tool

A placeholder that outlives the service that made it

Most placeholder tools hand you a URL pointing at their server. That works until the service rate-limits you, goes down, or quietly disappears — and it puts a third-party request on every page of your staging site. This generates the image itself, as an inline SVG you own outright.

How to use it

  1. Set the size

    Pick a common size or type your own. The label defaults to the dimensions, which is usually what you want while laying a page out.

  2. Choose an icon and shape

    Photo, avatar, chart, text-only or blank; square, rounded or circle. Avatar plus circle gives a profile placeholder.

  3. Pick light or dark

    Both presets keep enough contrast for the label to stay readable, and the ratio is checked live.

  4. Copy or download

    An <img> tag with an inline data URI, the raw SVG, a CSS background, or download it as SVG or PNG.

Why a data URI beats a placeholder URL

An inline SVG renders on the first paint with no network round trip, survives the death of any hosted service, scales to any size without blurring, and leaks nothing about your unreleased project to a third party. The whole image is usually a couple of kilobytes of text — the size is shown under the preview.

Placeholders are decorative

Give them alt="". A grey box conveys nothing, so an empty alt marks it decorative and screen readers skip it entirely. Writing alt="placeholder" forces assistive technology to announce a word that helps nobody.

Keep the shimmer in CSS

A loading shimmer is a property of the loading state, not of the image, so it belongs in a CSS overlay rather than baked into the file. That way the same placeholder works with and without animation, and honouring prefers-reduced-motion costs one media query — see the progress bar generator for the same argument about loaders.

Contrast still applies

A dark placeholder with a slightly-less-dark label is a common mistake — it looks fine on the designer's monitor and disappears on anyone else's. The ratio between background and foreground is checked live, and 3:1 is the floor for the label and icon to stay visible.

Frequently asked questions

How do I make a placeholder image without an external service?
Use an inline SVG data URI: <img src="data:image/svg+xml,…">. It renders instantly, costs no HTTP request, works offline, and cannot break when someone else's placeholder host goes down or starts rate-limiting. Everything this tool outputs is self-contained.
Why is SVG better than a placeholder URL service?
Three reasons: it keeps working when the service disappears, it adds no third-party request to your page, and it scales to any size without blurring. Placeholder services also see every request your dev site makes, which is a quiet privacy leak in a staging environment.
How do I make a dark placeholder image?
Set the background to a dark neutral around #27272a and the foreground to a mid grey like #a1a1aa. The important part is keeping at least 3:1 between them, or the label and icon vanish. The reading under the preview checks it as you change colours.
What alt text should a placeholder image have?
alt="". A placeholder carries no information, so an empty alt marks it decorative and screen readers skip it. Describing it as "placeholder" just makes assistive technology announce something meaningless.
How do I make a round profile placeholder?
Set the shape to circle, which gives the SVG a corner radius of half its shorter side, and pick the avatar icon. Keep the image square — a circle on a non-square canvas becomes an ellipse.
How do I add a loading shimmer?
The shimmer belongs in CSS, not in the image: a pseudo-element with a moving linear-gradient over the placeholder. Keeping it separate means the same static image works with or without the animation, and you can respect prefers-reduced-motion without regenerating anything.
Should I use a placeholder or a real low-quality preview?
A placeholder is right when there is no image yet — empty states, mockups, skeleton screens. Once you have the real image, a blurred low-quality preview of it is better, because it hints at the actual content instead of showing a grey box.

Related tools

Every generator here writes CSS you can paste straight into a project.