Gerador de Imagem Placeholder
Gere uma imagem placeholder em SVG escalável — fundo sólido ou em gradiente com texto centralizado com as dimensões ou com seu próprio texto, além de uma borda opcional.
Entrada
Fundo
Texto
Borda
Saída
Sua imagem placeholder aparecerá aqui.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/image-placeholder-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"width": "800",
"height": "600",
"bgType": "solid",
"bgColor": "#cccccc",
"gradientStart": "#667eea",
"gradientEnd": "#764ba2",
"gradientAngle": "135",
"customText": "",
"text": "",
"textColor": "#666666",
"fontSize": "48",
"showBorder": "",
"borderColor": "#999999",
"borderWidth": "4"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `image-placeholder-generator` tool (Image Placeholder Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/image-placeholder-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Imagem Placeholder — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que esta ferramenta faz
Ela gera uma imagem placeholder — um fundo sólido ou em gradiente com um rótulo centralizado — em SVG, pronta para usar em um mockup, um wireframe, uma entrada de CMS ou uma tag <img> enquanto o recurso real ainda não está pronto. Por padrão, o rótulo mostra as dimensões da própria imagem (800 × 600), para que uma página cheia de placeholders mostre de relance qual caixa tem qual tamanho. Como a saída é SVG e não uma imagem raster, ela continua perfeitamente nítida em qualquer nível de zoom e o arquivo é minúsculo — poucas centenas de bytes para uma caixa de cor sólida, não importa a largura e a altura que você definir.
Como usar
- Defina a largura e a altura em pixels (até 4000px cada).
- Escolha um fundo: uma cor chapada ou um gradiente linear com cor inicial, cor final e ângulo próprios.
- Deixe o texto com as dimensões padrão ou ative texto personalizado e digite seu próprio rótulo (nome de um cliente, "Imagem principal", "Em breve" — o que quiser).
- Ajuste a cor do texto e o tamanho da fonte e, se quiser, ative uma borda com cor e espessura próprias.
- Copie o código-fonte SVG ou baixe como arquivo
.svg— a pré-visualização é atualizada sempre que você muda qualquer configuração.
Por que SVG em vez de PNG ou JPG?
A função de um placeholder é manter o formato e o tamanho de uma caixa antes que o conteúdo real chegue, e o SVG faz isso melhor do que qualquer imagem raster: ele fica nítido em 100px ou 10.000px de largura a partir dos mesmos poucos bytes, pode ser copiado e colado como marcação simples (útil para incorporar diretamente em HTML/CSS sem hospedar um arquivo) e a maioria das ferramentas que aceitam imagens — navegadores, ferramentas de design, geradores de sites estáticos — aceita SVG nativamente. Se você precisar especificamente de um arquivo raster, carregue o SVG baixado em qualquer editor de imagens ou em uma etapa de <img> para canvas e exporte a partir daí; de qualquer forma, o SVG é a fonte da verdade.
Posso usar isso em layouts reais, e não só em mockups?
Sim — aponte um <img src="placeholder.svg"> para o arquivo baixado, ou insira a marcação SVG diretamente no seu HTML, e ele se comporta como qualquer outra imagem: escala com width/height ou com CSS, e os navegadores o armazenam em cache como qualquer recurso estático. Como não depende de nada externo (nenhum serviço de placeholder de terceiros que possa cair ou limitar suas requisições), também é seguro usá-lo em produção como estado de fallback, e não apenas em desenvolvimento local.
Meus dados são privados?
Sim. Tudo acontece no seu navegador — o SVG é gerado localmente a partir das configurações que você escolhe, sem upload, sem conta e sem ida e volta ao servidor. Nada do que você digita (incluindo qualquer texto personalizado) sai do seu dispositivo.
O texto se ajusta automaticamente ao tamanho da caixa?
Não — o tamanho da fonte é uma configuração que você controla diretamente, não um ajuste automático. Para textos personalizados muito longos em um placeholder pequeno ou estreito, reduza o tamanho da fonte até que fique legível; para o rótulo padrão 800 × 600, o número de dígitos costuma ser curto o suficiente para que o tamanho padrão de 48px caiba bem em qualquer imagem maior que uma miniatura pequena.