useSignal logouseSignal

Image Placeholder

Placeholder Image URLs by API

Get placeholder images from a simple URL — /placeholder/600x400 — with size, text, colors, and style set by query parameters. A modern via.placeholder alternative.

  • Any size up to 4000 px
  • Copy a URL, HTML, Markdown, or JSX
  • PNG and SVG downloads

Quick mode

Full workspace

Controls

Placeholder settings

Size presets

Common developer image sizes

Dimensions

Text

Visual style

Fast tasteful starting points

Appearance

Branding

Live preview

1200×630 placeholder

Live placeholder preview
1200×630Minimal · minimal

Direct URL

Most used
https://www.usesignal.dev/placeholder/1200x630

HTML

<img src="https://www.usesignal.dev/placeholder/1200x630" alt="1200 by 630 placeholder" width="1200" height="630" />

Markdown

![Placeholder image](https://www.usesignal.dev/placeholder/1200x630)

React (JSX)

<img src="https://www.usesignal.dev/placeholder/1200x630" alt="1200 by 630 placeholder" width={1200} height={630} />

CSS background

background-image: url("https://www.usesignal.dev/placeholder/1200x630");
The full workspace addsSave with a nameShare linksReopen saved workYour work comes with you

Use it as a URL

A placeholder is just a link.

Put the size in the path and style it with query parameters. It works anywhere an image URL does: an<img>tag, Markdown, CSS, or a design mock. Images are SVG, so they stay sharp at any size.

/placeholder/600x400?text=Product+shot&style=dark&pattern=dots
ParameterWhat it does
/placeholder/600x400Width × height, up to 4000 each
text=HelloThe label; defaults to the size
bg=0f172aBackground colour, hex without #
color=f8fafcText colour, hex without #
style=darkminimal, grid, gradient, dark, or glass
pattern=gridplain, grid, diagonal, dots, or minimal
radius=24Corner radius in pixels
fontSize=48Text size; automatic when left out
brand=0Hides the small useSignal label

URL-first placeholders

Create mock image URLs that are easy to paste into HTML, docs, markdown, prototypes, and component demos.

Design-safe defaults

Start from clean colors, readable typography, and subtle patterns instead of loud placeholder blocks.

Snippets ready

Copy the direct URL, HTML image tag, Markdown image, React image, or CSS background snippet from one workspace.

Why it helps

Why use a placeholder image URL API

  • Drop a URL like /placeholder/100x100 straight into an img tag instead of creating throwaway image assets.

  • Customize text, background, foreground, radius, and pattern with query parameters that read like documentation.

  • Responses are lightweight SVG with long-lived caching, so mockups and docs stay fast.

How to use it

How the placeholder URL works

  1. 1

    Request https://www.usesignal.dev/placeholder/{width}x{height} — for example /placeholder/600x400.

  2. 2

    Add query parameters like ?text=Hero&bg=eef2ff&color=312e81 to style the image.

  3. 3

    Paste the URL into HTML, Markdown, React, CSS, or anywhere an image URL works.

Quick tips

Placeholder URL tips

  • Common sizes: /placeholder/100x100 for avatars, /placeholder/300x250 for ad slots, /placeholder/1200x630 for Open Graph previews, /placeholder/1920x1080 for hero banners.

  • Use the studio to design a placeholder visually, then copy the equivalent URL or an HTML, Markdown, React, or CSS snippet.

  • If you migrated from via.placeholder.com, the size-in-path pattern works the same way here.

FAQ

Placeholder image URL questions

How do I get a 100x100 placeholder image?

Use https://www.usesignal.dev/placeholder/100x100 directly in an img tag. Any width and height combination works in the same pattern.

Is this an alternative to via.placeholder.com?

Yes. It uses the same size-in-path idea — /placeholder/300x200 — plus query parameters for text, colors, radius, and pattern styling.

Can I customize the placeholder text and colors?

Yes. Add query parameters like ?text=Preview&bg=eef2ff&color=312e81 to control the label and colors, or design it visually in the studio and copy the URL.

What format do the URLs return?

The URL API returns lightweight SVG images that stay crisp at any display size and cache well. PNG export is available from the studio.

Is the placeholder URL API free?

Yes. The URLs are free to use in mockups, docs, prototypes, and demos without an account.

Open the main Image Placeholder page

This page focuses on one search intent. The main tool page includes the broader product overview, related workflows, and full use cases.

Open the main Image Placeholder workflowSVG Placeholder ImagesImage Placeholder GeneratorImage Optimizer