Blob atrás de um cartão
Grátis, sem cadastro, roda no seu navegador.
Um blob atrás de um cartão ou de um bloco de texto, como cor e não como uma forma que alguém deva olhar diretamente. O uso mais tolerante para um blob e aquele em que uma predefinição quase circular funciona melhor.
A receita
| Forma | Blob suave |
|---|---|
| Exportar como | Fundo CSS |
| Tamanho | 491 B |
Passo a passo
- Escolha Blob suave — a pouca aleatoriedade fica discreta atrás do conteúdo.
- Escolha uma cor próxima ao fundo da sua página, um tom ou dois de distância.
- Exporte como Fundo CSS e aplique ao próprio contêiner do cartão.
- Use `background-position` para empurrá-lo para fora do centro — um blob centralizado parece um erro.
O que você vai copiar
.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 33.65C118.88 33.14,151.1 49.98,159.29 65.77C167.49 81.56,159.05 113.2,149.17 128.39C139.29 143.58,116.48 156.87,100 156.92C83.52 156.98,59.27 143.39,50.27 128.71C41.27 114.03,37.71 84.67,46 68.82C54.29 52.98,81.12 34.16,100 33.65Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat…Em mais detalhe
Mantenha o contraste baixo. Um fundo decorativo que compete com o texto à sua frente falha duas vezes: distrai e arrasta junto a razão de contraste do texto. Se você não consegue ler o cartão com conforto com o blob atrás, o blob está escuro demais e não o texto claro demais.
Perguntas
De qual forma devo partir para Blob atrás de um cartão?
Blob suave, exportada como Fundo CSS. Essa combinação é a que estrutura esta página, e a pré-visualização acima é exatamente essa forma — mas é um ponto de partida, não uma regra. Todos os controles continuam ativos assim que você a abre.
Quanto isso adiciona à página?
Cerca de 491 bytes para esta combinação. É menos que um único ícone e não precisa de nenhuma requisição de rede, porque a forma é marcação e não um arquivo de imagem.
Vai funcionar no celular?
Sim. Um divisor de onda é configurado para esticar até o contêiner em vez de manter a proporção, e é isso que permite que uma única forma cubra qualquer largura de tela sem tarjas. Blobs mantêm as proporções, já que um blob esticado é só uma elipse.
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.