Fundo CSS
Grátis, sem cadastro, roda no seu navegador.
O mesmo SVG, codificado em porcentagem dentro de um data URI de `background-image`. Use quando não puder acrescentar um elemento à página e tiver que decorar um que já existe — uma seção, um cartão, um cabeçalho cuja marcação você não controla.
Uma exportação de Fundo CSS, cortada nas primeiras linhas
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}O que vale saber
- Sem elemento extra e sem requisição de rede: a forma viaja dentro da folha de estilo.
- Codificado em porcentagem em vez de base64, que é cerca de um terço menor para a mesma imagem.
- Cada `#` é codificado, o que é a diferença entre um fundo que pinta e um que silenciosamente não pinta.
- Maior que o SVG puro, porque escapar custa três caracteres para cada um que substitui.
Compatibilidade de navegadores
Universal. Data URIs em `background-image` funcionam em todo lugar. A única armadilha de compatibilidade é a codificação, não o suporte — e ela é resolvida na saída em vez de ser deixada para você.
Tamanho em todas as predefinições
Todas as predefinições que este formato consegue expressar, medidas como o gerador as emite. A menor é Hexágono com 312 bytes; a maior é Ondas em camadas com 1.071 bytes. A contagem de pontos é o que determina a diferença — cada ponto extra adiciona um segmento cúbico inteiro de coordenadas.
| Formato | Tamanho |
|---|---|
| Hexágono | 312 B |
| Cristal | 317 B |
| Gema facetada | 343 B |
| Triângulo arredondado | 378 B |
| Picos de montanha | 392 B |
| Arco | 407 B |
| Ziguezague marcado | 425 B |
| Onda profunda | 443 B |
| Seixo | 455 B |
| Borda de nuvem | 456 B |
| Arcos recortados | 480 B |
| Onda suave | 483 B |
| Blob suave | 491 B |
| Degraus | 519 B |
| Festão | 543 B |
| Blob orgânico | 563 B |
| Brilho | 569 B |
| Onda orgânica | 639 B |
| Estrela | 712 B |
| Onda de rodapé | 718 B |
| Flor | 718 B |
| Bolha | 720 B |
| Borda pixelada | 740 B |
| Respingo | 802 B |
| Ondulação | 816 B |
| Ondas em camadas | 1.071 B |
Em mais detalhe
Esta é a exportação com uma armadilha de verdade. Um `#` sem codificar dentro de um data URI encerra a URL: o navegador trata tudo depois dele como identificador de fragmento, o SVG fica malformado e o fundo simplesmente não aparece — sem erro no console e sem entrada de rede para procurar. Como cada cor na marcação é um literal hexadecimal, o primeiro preenchimento já corta a coisa inteira. Alguns geradores escapam disso recorrendo a base64, que é correto mas desnecessariamente maior. Aqui o `%` é escapado primeiro e o `#` logo em seguida, que é a única ordem que funciona.
Perguntas
Quais formas funcionam como Fundo CSS?
Este formato cobre Onda, Blob. Isso é uma restrição real e não uma limitação desta ferramenta: onde um gerador falta nessa lista, o formato realmente não consegue expressá-lo, e oferecê-lo mesmo assim entregaria a você algo que desenha silenciosamente a forma errada.
Qual o tamanho de uma exportação de Fundo CSS?
Entre 312 e 1.071 bytes nas 26 predefinições que o suportam. Menos pontos é a alavanca que importa; suavidade e cor não custam nada.
Posso editar à mão depois?
Pode. A saída é texto puro sem comentário do gerador, sem marcação identificadora e sem link de volta para cá. Mude as cores, renomeie a classe ou cole o caminho no seu próprio SVG — nada mais adiante depende de ele continuar como estava.
Cada número e cada forma desta página foram produzidos rodando o gerador no momento do build, então descrevem a ferramenta que você está prestes a usar e não uma versão dela que já existiu.