border-radius CSS
Grátis, sem cadastro, roda no seu navegador.
O blob mais curto em CSS: oito porcentagens numa propriedade, sem SVG em lugar nenhum. É uma forma genuinamente diferente dos blobs SVG, e é oferecida como coisa própria e não como o mesmo blob em outro formato.
Uma exportação de border-radius CSS, cortada nas primeiras linhas
.blob {
width: 320px;
height: 320px;
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}O que vale saber
- Uma propriedade num elemento que você já tem — nada para colar na marcação.
- Apenas quatro cantos, então não consegue reproduzir um blob de seis lóbulos e não finge que consegue.
- Anima e faz transição suavemente, o que um caminho SVG não faz sem trabalho extra.
- Os valores são gerados dentro do próprio limite de escala do navegador, então o que você vê é o que é renderizado.
Compatibilidade de navegadores
Universal. A sintaxe de oito valores com barra é suportada desde a própria propriedade. Só blobs — uma onda não tem equivalente de quatro cantos, e é por isso que este formato fica desabilitado no gerador de ondas em vez de produzir algo errado em silêncio.
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 94 bytes; a maior é Brilho com 110 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 | 94 B |
| Respingo | 102 B |
| Seixo | 104 B |
| Flor | 104 B |
| Bolha | 106 B |
| Triângulo arredondado | 108 B |
| Cristal | 108 B |
| Blob suave | 110 B |
| Blob orgânico | 110 B |
| Gema facetada | 110 B |
| Estrela | 110 B |
| Brilho | 110 B |
Em mais detalhe
Há uma regra na especificação CSS que pega quase todos os geradores desse tipo. Se os dois raios que se encontram numa borda somarem mais que o comprimento dessa borda, o navegador calcula um único fator de escala a partir da pior borda e multiplica **todos** os raios por ele. Um par ruim não achata apenas um canto — encolhe o arredondamento da forma inteira, então o navegador desenha algo visivelmente diferente da pré-visualização. Os pares aqui são gerados de modo que cada um some no máximo 100%, o que faz esse fator ser exatamente 1 por construção e não por sorte.
Perguntas
Quais formas funcionam como border-radius CSS?
Este formato cobre 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 border-radius CSS?
Entre 94 e 110 bytes nas 12 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.