Documentação e Referência

Referência completa de parâmetros da API, guia de destaque de texto, modo somente ícones

Sintaxe Básica

hl_syntax_desc

# Formato da sintaxe
?text=Texto normal{{texto destacado}}mais texto normal
&hlcolor=FF5733

Detalhes dos Parâmetros

hlcolor hl_param_hlcolor

hl_param_hlcolor_desc

hl_example_prefix： ?text=Mock{{Img}}.Dev&hlcolor=FF5733

hlcolor2 hl_param_hlcolor2

hl_param_hlcolor2_desc

hl_example_prefix： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6

hlgradient hl_param_hlgradient

hl_param_hlgradient_desc

horizontal Horizontal (esquerda para direita) vertical Vertical (de cima para baixo) diagonal Diagonal (superior-esquerdo para inferior-direito)

hl_example_prefix： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical

hlfont hl_param_hlfont

hl_param_hlfont_desc

hl_example_prefix： ?text={{Brand}}&hlfont=Poppins-Bold

hlbold hl_param_hlbold

hl_param_hlbold_desc

hl_example_prefix： ?text={{Important}}&hlbold=true

Exemplos Completos

hl_example_prefix 1：hl_ex1_title

https://mockimg.dev/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733

hl_effect_prefix"MockImg.Dev" — Img exibido em vermelho

hl_example_prefix 2：hl_ex2_title

https://mockimg.dev/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6

Efeito: "Gradient" exibido em gradiente horizontal de rosa a roxo

hl_example_prefix 3：hl_ex3_title

https://mockimg.dev/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6

Efeito: "MockImg" exibido em azul com fonte Poppins-Bold

hl_example_prefix 4：hl_ex4_title

https://mockimg.dev/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444

Efeito: "Important" exibido em vermelho e negrito

hl_example_prefix 5：hl_ex5_title

https://mockimg.dev/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold

Efeito: "Premium" exibido com gradiente diagonal (dourado a vermelho) em fonte Montserrat-Bold

hl_example_prefix 6：hl_ex6_title

https://mockimg.dev/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6

Efeito: "MockImg" e texto de espaço reservado exibidos em azul (estilo de destaque compartilhado)

hl_example_prefix 7：hl_ex7_title

https://mockimg.dev/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981

Efeito: "MockImg" exibido em verde, restante usa cor padrão

hl_example_prefix 8：hl_ex8_title

https://mockimg.dev/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24

Efeito: No tema escuro, "Mode" exibido com destaque dourado

Observações

hl_note_1
hl_note_2
hl_note_3
hl_note_4
hl_note_5

Condições de Ativação

Parâmetro icon fornecido
Sem parâmetro text, ou text vazio

Regras de Tamanho do Ícone

Automático: tamanho do ícone = 80% da menor dimensão da imagem (mínimo 24px, máximo 90%)

Personalizado: usar o parâmetro iconsize para sobrescrever o cálculo automático

Exemplos

Ícone de Cor Sólida

https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FF5733

Efeito: ícone de coração ampliado e centralizado automaticamente em vermelho

Ícone com Gradiente

https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&iconcolor2=FF6B6B&icongradient=diagonal

Efeito: ícone de estrela com gradiente diagonal de dourado para vermelho

Transparente + Ícone

https://mockimg.dev/200x200.png?icon=outline/user&iconcolor=3B82F6&bg=transparent

Efeito: ícone de usuário sobre fundo transparente — perfeito para avatares

Fundo com Gradiente + Arredondado

https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FFFFFF&gradient=horizontal&bgcolor2=EC4899&radius=20

Efeito: ícone de coração branco sobre gradiente rosa com cantos arredondados

Tema Escuro + Ícone

https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&theme=dark

Efeito: ícone de estrela dourado sobre fundo escuro

Borda Circular (Avatar)

https://mockimg.dev/400x400.png?icon=outline/user&iconcolor=3B82F6&radius=200&border=4&bordercolor=3B82F6

Efeito: ícone de usuário em círculo com borda — ideal para espaços reservados de avatar

Ícone+Texto vs Apenas Ícone

Modo	URL	Efeito
Apenas ícone (sem texto)	`?icon=outline/heart`	Ícone ampliado e centralizado automaticamente, sem texto
Ícone + Texto Vazio	`?icon=outline/heart&text=`	Mesmo que apenas ícone
Ícone + Texto	`?icon=outline/heart&text=Love`	Ícone e texto lado a lado (comportamento original)
Sem Ícone e Sem Texto	`600x400.png`	Texto de dimensões (comportamento padrão)

Observações

Funciona com todos os formatos de saída (SVG, PNG, JPEG, WebP, AVIF, etc.)
Todos os parâmetros de ícone (iconcolor, iconcolor2, icongradient, iconsize) funcionam conforme esperado
Todos os efeitos de fundo (transparente, gradiente, padrão, ruído, borda, raio) podem ser combinados com o modo apenas ícone
Também funciona com tamanhos pequenos — perfeito para favicons: 32x32.ico?icon=filled/star&iconcolor=FFD700

Visão geral

O parâmetro padding controla o espaço em branco ao redor do texto e ícones. Suporta 4 formatos: valor único em px, proporção única, dois valores (vertical + horizontal) e quatro valores (sentido horário CSS).

# Formatos suportados
?padding=20
?padding=1/6
?padding=10,20
?padding=10,20,30,40

Comportamento padrão

Sem o parâmetro padding, os valores padrão são usados (igual às versões anteriores):

Esquerda e direita: 5% da largura Superior e inferior: 20% da altura

Detalhes do formato

20 Valor único em pixels

Todas as quatro bordas usam o mesmo valor em pixels.

padding=20

1/6 Valor único em proporção

Todas as quatro bordas usam uma proporção. Superior/inferior baseado na altura, esquerda/direita baseado na largura. Resultados arredondados automaticamente.

padding=1/6 → 600×400 → superior/inferior 67px, esquerda/direita 100px

10,20 Dois valores (vertical + horizontal)

Controla preenchimento vertical e horizontal separadamente. Pixels e proporções podem ser misturados.

padding=10,20 → superior/inferior 10px, esquerda/direita 20px
padding=1/8,15 → superior/inferior = altura/8, esquerda/direita 15px
padding=30,1/10 → superior/inferior 30px, esquerda/direita = largura/10

10,20,30,40 Quatro valores (sentido horário CSS)

Controle CSS independente: superior, direita, inferior, esquerda. Superior/inferior baseado na altura, esquerda/direita na largura. Pixels e proporções misturáveis.

padding=10,20,30,40 → superior 10, direita 20, inferior 30, esquerda 40 (tudo px)
padding=1/8,1/6,15,1/10 → superior h/8, direita w/6, inferior 15px, esquerda w/10 (misto)

Exemplos

Texto curto — Reduzir espaçamento

https://mockimg.dev/480x200.svg?text=IP&bold=true&padding=1/10

Texto curto como "IP" com padding=1/10 para layout mais compacto.

Sem preenchimento

https://mockimg.dev/600x400.svg?text=Full&padding=0

Definir padding=0 para que o conteúdo preencha toda a imagem.

Ícone + texto — Layout compacto

https://mockimg.dev/600x400.svg?icon=outline/heart&text=Love&padding=1/8

Ícone e texto lado a lado com preenchimento moderado.

Área de título — Assimétrico superior

https://mockimg.dev/600x300.svg?text=Title&padding=40,10,5,10

Preenchimento superior grande para criar área de título, inferior compacto.

Navegação esquerda — Assimétrico esquerdo

https://mockimg.dev/800x400.svg?text=Content&padding=20,10,20,60

Preenchimento esquerdo grande para acomodar barra de navegação.

Observações

Numerador e denominador em valores de proporção devem ser positivos
Valores em pixels não podem ser negativos — negativos são corrigidos para 0
Resultados de proporção são arredondados automaticamente para pixels inteiros
Se o preenchimento exceder metade das dimensões da imagem, a área de conteúdo pode ficar muito pequena e o tamanho da fonte será reduzido automaticamente para mínimo de 12px

Recursos Avançados — Depurador Interativo da API

Sistema de Ícones

Documentação e Referência

Sintaxe Básica

Detalhes dos Parâmetros

Exemplos Completos

Observações

Condições de Ativação

Regras de Tamanho do Ícone

Exemplos

Ícone+Texto vs Apenas Ícone

Observações

Visão geral

Comportamento padrão

Detalhes do formato

Exemplos

Observações