Placeholder Generator

Generate colored or textured placeholder images at any size.

Placeholder Generator makes "colored or textured placeholder images at any size" — exactly what the card promises — without uploading anything. Set Width (px) and Height (px), pick a Style (Solid Color, Gradient, Checkerboard, Text Label, or Noise), configure the colors or text for that style, and download a PNG named placeholder-{w}x{h}.png.

The preview regenerates live with a 150ms debounce on every form change, so tweaking stops and starts feel immediate. Text Label defaults to showing the dimensions ("400×300" at 24px, #666666 on a light field), which makes it a wireframing workhorse; Noise and Checkerboard cover texture needs; gradients support Linear, Radial, and Conic with 2–8 stops.

How it works

generatePlaceholder draws everything on a canvas: solid fill; gradient with linear/radial/conic constructors and up to eight color stops; a 20px checkerboard pattern; centered text with configurable font size and color; or per-pixel noise jittering each channel by ±40 around the base color.

A debounced 150ms effect re-runs generation whenever watched form values change, so the "Generated placeholder" preview stays in sync with Width, Height, Style, and style-specific fields. "Download Placeholder" serializes the canvas to a PNG data URL and saves it — always PNG regardless of style. No network, no AI.

How to use

Set Width (px) and Height (px) — defaults are 400×300.
Pick Style: Solid Color, Gradient, Checkerboard, Text Label, or Noise.
Configure the style fields — Color; Color 1 / Color 2; Background / Text Color / Text / Font Size; or Gradient Type (Linear/Radial/Conic), Angle (°), and Color Stops.
Watch the live preview regenerate ~150ms after each change (alt: "Generated placeholder").
For gradients, use "Add Stop" and remove stops while more than two remain (2–8 allowed) and set each position.
Click "Download Placeholder" to save placeholder-{width}x{height}.png.

Tips

Text Label style defaults to "{w}×{h}" text — ideal drop-in boxes for wireframes and layout mocks.
Noise is a quick texture background: random pixel jitter on top of the base color.
Gradient stops are capped at 8; you can delete down to a minimum of 2.
Output is always lossless PNG — quality and format are not adjustable (nor needed for flat art).
Very large width/height values are just numbers on a canvas, but huge sizes can get memory-heavy in-browser.