Placeholder Image API Guide
DummyDash provides a free URL-based image endpoint that returns an exact-size PNG without an API key or account. Put the width and height in the path, then use optional query parameters for solid colors or gradients.
How the API Works
The DummyDash endpoint handles an HTTP GET request. 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 in memory 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.
Capabilities and Limits
DummyDash keeps the request contract intentionally small and transparent:
- No signup or API key: Construct the URL and make a GET request
- Built-in gradient styles: Choose from sunset, ocean, and forest or define a custom two-color gradient
- Dimension labels: Every generated image clearly shows its pixel dimensions, which is useful during layout debugging
- Bounded dimensions: Width and height must each be between 1 and 2000 pixels
- PNG only: There is no JPG, WebP, SVG, or AVIF output
- Development service: There is no custom label text, bulk endpoint, versioned API contract, or uptime SLA
Try It Now
Use the interactive generator on our homepage to visually configure your placeholder image and copy the URL.
Open the Generator