generate placeholder images with custom dimensions, colors, and text. download as PNG.
Generate a placeholder image at any pixel size, with custom background and text colors. Download as PNG, or copy as a data URI to drop directly into HTML or CSS.
When you are building a layout — wireframing a landing page, mocking up a card component, prototyping a feed — you usually have empty image slots before the real photography exists. You can either leave them blank, which makes the layout collapse and reads as broken, or fill them with stock photography, which biases the design toward whatever those specific images happen to look like.
A neutral placeholder occupies the space at the right dimensions, displays the dimensions on the image so you can verify your layout, and signals “this is filler” clearly enough that nobody confuses it for finished work.
Embedded directly in HTML or CSS, the data URI version skips a separate request:
<img src="data:image/png;base64,..." alt="Placeholder" />Useful for prototype HTML files where you want everything in one self-contained document, for email templates that have to inline all assets, or for development environments where a separate placeholder asset would be one more thing to check in. The PNG file is also available for cases where the data URI approach is wrong (large images, externally- hosted templates, when you want a real asset path).
The image is rendered on a canvas in your tab and exported. No external service. The placeholder “industry” of via.placeholder.com and similar services exists only because not every codebase has access to a canvas primitive — a static site generator might. For ad-hoc placeholder generation in the browser, this tool is the simpler answer.
Generate a placeholder image at any pixel size, with custom background and text colors. Download as PNG, or copy as a data URI to drop directly into HTML or CSS.
When you are building a layout — wireframing a landing page, mocking up a card component, prototyping a feed — you usually have empty image slots before the real photography exists. You can either leave them blank, which makes the layout collapse and reads as broken, or fill them with stock photography, which biases the design toward whatever those specific images happen to look like.
A neutral placeholder occupies the space at the right dimensions, displays the dimensions on the image so you can verify your layout, and signals “this is filler” clearly enough that nobody confuses it for finished work.
Embedded directly in HTML or CSS, the data URI version skips a separate request:
<img src="data:image/png;base64,..." alt="Placeholder" />Useful for prototype HTML files where you want everything in one self-contained document, for email templates that have to inline all assets, or for development environments where a separate placeholder asset would be one more thing to check in. The PNG file is also available for cases where the data URI approach is wrong (large images, externally- hosted templates, when you want a real asset path).
The image is rendered on a canvas in your tab and exported. No external service. The placeholder “industry” of via.placeholder.com and similar services exists only because not every codebase has access to a canvas primitive — a static site generator might. For ad-hoc placeholder generation in the browser, this tool is the simpler answer.
PDF utilities, image tools, developer helpers — all free, no signup.
Live regex tester and debugger.
Convert text between UPPERCASE, lowercase, Title Case, camelCase, snake_case, kebab-case, and more.
Resize photos to exact dimensions with aspect ratio lock.
Compare two texts side by side with line-by-line diff highlighting.
Generate SEO meta tags, Open Graph, and Twitter Card HTML.
Encode or decode URL strings in real time.