Placeholder Image API Guide
DummyDash provides a simple, URL-based API to generate placeholder images on the fly. No API key, no signup, no rate limits -- just construct a URL and get a custom-sized image in PNG format.
How the API Works
The DummyDash API follows a RESTful URL pattern. You specify the desired image dimensions directly in the URL path, and optional styling is controlled through query string parameters. The server generates the image on the fly and returns it as a PNG.
https://dummydash.com/image_{width}x{height}
Both width and height are integers between 1 and 2000 (pixels). The generated image displays its dimensions as a centered text label.
URL Parameters Reference
| Parameter | Values | Description |
|---|---|---|
| style | default, sunset, ocean, forest, solid, gradient |
Predefined color theme or custom mode |
| color | Hex code (without #), e.g. ff6600 |
Fill color when style=solid |
| color1 | Hex code (without #) | Start color when style=gradient |
| color2 | Hex code (without #) | End color when style=gradient |
| direction | to right, to bottom, to bottom right, to bottom left |
Gradient direction (default: to right) |
Integration Examples
HTML
<!-- Basic placeholder -->
<img src="https://dummydash.com/image_400x300" alt="Placeholder 400x300" width="400" height="300">
<!-- Ocean gradient -->
<img src="https://dummydash.com/image_800x400?style=ocean" alt="Ocean placeholder">
<!-- Custom solid color -->
<img src="https://dummydash.com/image_200x200?style=solid&color=e74c3c" alt="Red placeholder">
CSS Background
.hero-section {
background-image: url('https://dummydash.com/image_1920x600?style=sunset');
background-size: cover;
background-position: center;
}
JavaScript / Dynamic Generation
// Generate multiple placeholders dynamically
const sizes = ['200x200', '400x300', '800x400'];
sizes.forEach(size => {
const img = document.createElement('img');
img.src = `https://dummydash.com/image_${size}`;
img.alt = `Placeholder ${size}`;
document.getElementById('gallery').appendChild(img);
});
React / JSX
function PlaceholderCard({ width = 300, height = 200, style = 'default' }) {
const src = `https://dummydash.com/image_${width}x${height}?style=${style}`;
return (
<div className="card">
<img src={src} alt={`${width}x${height}`} width={width} height={height} />
</div>
);
}
Custom Gradient via URL
https://dummydash.com/image_600x400?style=gradient&color1=667eea&color2=764ba2&direction=to%20bottom%20right
This generates a 600x400 image with a purple diagonal gradient from top-left to bottom-right.
How DummyDash Compares
Several placeholder image services exist, each with different strengths. Here is how DummyDash stacks up:
- No signup or API key: Unlike some services that require registration, DummyDash works immediately with just a URL
- Built-in gradient styles: Choose from preset themes (sunset, ocean, forest) or define custom color gradients -- most alternatives only offer solid colors
- Dimension labels: Every generated image clearly shows its pixel dimensions, which is useful during layout debugging
- Generous size limits: Supports up to 2000x2000 pixels, covering everything from thumbnails to large hero banners
- Reliable and maintained: Some older placeholder services have been deprecated or experience downtime. DummyDash is actively maintained and free to use
Try It Now
Use the interactive generator on our homepage to visually configure your placeholder image and copy the URL.
Open the Generator