# Formas orgânicas no design: blobs, curvas e formas suaves

[Canonical HTML page](https://gradiently.design/pt-br/guide/organic-shapes-design)

Blobs, seixos, arcos e curvas suaves fazem um design parecer humano e calmo. Aqui está onde funcionam, como desenhar uma forma que pareça intencional e como enquadrar fotos com elas.

## The short version

- Formas orgânicas são formas irregulares e fluidas, como blobs, seixos, folhas e ondulações, em oposição a formas geométricas como quadrados e círculos.
- Elas deixam os designs mais suaves, mais humanos e mais naturais, o que combina com marcas de bem-estar, comida, beleza, infantis e de estilo de vida.
- Um bom blob tem poucas curvas amplas de tamanhos diferentes, sem pontas agudas nem tremidas minúsculas.
- Molduras de foto em blob e arco transformam fotos comuns em imagens de marca sem exigir habilidade de edição.
- Em CSS, um blob simples pode ser feito com um border-radius de oito valores e animado mudando esses valores devagar.

**Formas orgânicas** são formas irregulares e fluidas: blobs, seixos, folhas, poças, ondulações e arcos suaves. Ao contrário das formas geométricas, que seguem regras (um quadrado tem quatro lados iguais), elas parecem ter crescido ou sido derramadas. No design trazem suavidade e calor, e são especialmente úteis como molduras de foto, formas de fundo e contêineres de texto curto. O truque é fazê-las parecer escolhidas e não acidentais.

## Formas orgânicas versus formas geométricas

As formas geométricas se leem como precisas, construídas e racionais. As orgânicas se leem como naturais, relaxadas e humanas. Nenhuma é melhor; dizem coisas diferentes. Muitas boas identidades usam as duas: uma grade rigorosa de [design geométrico](https://gradiently.design/pt-br/guide/geometric-design) para texto e layout, com uma forma orgânica para dar calor.

### Geométrica

- Quadrados, círculos, triângulos, linhas retas
- Parece precisa, técnica, ordenada
- Combina com finanças, engenharia, arquitetura
- Fácil de alinhar e repetir

### Orgânica

- Blobs, seixos, folhas, ondas, arcos
- Parece calma, natural, acessível
- Combina com bem-estar, comida, beleza, família
- Exige cuidado para não parecer aleatória

## Onde as formas orgânicas funcionam melhor

| Uso | O que faz | Bom para |
| --- | --- | --- |
| Moldura de foto | Recorta uma foto em blob ou arco | Retratos, produtos, comida |
| Forma de fundo | Uma grande forma suave atrás do assunto | Fotos de produto, imagens hero |
| Contêiner de texto | Um seixo que guarda um preço ou uma frase curta | Ofertas, etiquetas, adesivos |
| Divisor de seção | Uma borda ondulada entre áreas de uma página | Sites, cardápios, folhetos |
| Padrão | Muitos seixos ou folhas pequenos repetidos | Embalagens, papéis de parede, papéis de embrulho |

Cinco trabalhos que as formas orgânicas fazem bem. Escolha um ou dois por design, não os cinco.

Estúdios de bem-estar, rótulos de cuidados com a pele, padarias, floristas, terapeutas e marcas infantis se apoiam nessas formas porque elas suavizam tudo ao redor. [Design de marca de cuidados com a pele](https://gradiently.design/pt-br/guide/skincare-brand-design) é um bom exemplo da categoria, em que um único seixo atrás de um frasco pode carregar o visual inteiro.

## Como desenhar um blob que pareça intencional

1. **Parta de um círculo ou quadrado arredondado** Um blob é um círculo que foi empurrado. Começar redondo mantém equilibrada a massa geral.
2. **Empurre três ou quatro pontos** Mova alguns pontos da borda para dentro e para fora em quantidades diferentes. De três a cinco saliências é o ponto ideal; mais que isso parece uma mancha.
3. **Varie o tamanho das curvas** Uma curva longa e suave, uma mais fechada, uma intermediária. Saliências iguais parecem mecânicas, como uma flor ou uma engrenagem.
4. **Remova pontas agudas e tremidas minúsculas** Toda curva deve ser suave o bastante para ser traçada devagar com o dedo. Pequenas quebras parecem erros à distância.
5. **Reutilize** Salve o seu melhor blob e use o mesmo, girado ou ampliado, em toda a marca. Uma forma reconhecível passa a fazer parte da identidade.

Mantenha os blobs grandes e poucos. Uma única forma ocupando um terço do quadro parece confiante; dez blobs pequenos parecem decoração acrescentada na última hora.

> **Dê cor ao blob com discrição** Preencha blobs de fundo com um tom próximo ao do fundo, um ou dois passos mais claro ou mais escuro, em vez de uma cor contrastante e berrante. A forma continua visível, mas a foto ou o título na frente dela mantém a atenção.

## Molduras de foto orgânicas: blobs e arcos

Recortar uma foto numa forma suave é a maneira mais fácil de fazer fotos comuns parecerem desenhadas. Um arco parece arquitetônico e calmo, um círculo parece pessoal e um blob parece relaxado e simpático. Use uma forma de moldura de modo consistente, para que uma grade de posts se leia como um conjunto.

- Molduras em **arco** combinam com interiores, cerâmica, casamentos e tudo que deva parecer sereno.
- Molduras **circulares** combinam com rostos: páginas de equipe, depoimentos, cards de palestrantes.
- Molduras em **blob** combinam com comida, plantas, animais e produtos de contorno irregular.
- Deixe calmo o fundo ao redor da moldura, para a forma ser legível.

O Studio do Gradiently pode recortar qualquer foto em arco, círculo ou blob e tingi-la com as cores do Mark de fundo em mono, duotone ou uma lavagem suave, para que a foto e a superfície atrás dela se pertençam. [Foto duotone](https://gradiently.design/pt-br/guide/photo-duotone-in-mark-colours) explica as opções de tinta.

Um post vertical para uma aula de ioga de domingo de manhã sobre um fundo suave e fluido com formas orgânicas

Um post de estúdio de ioga em que a superfície suave e fluida carrega a calma, e as palavras ficam na sua área mais quieta.

## Degradês orgânicos e formas suaves

As formas não precisam de bordas duras para parecer orgânicas. Degradês radiais sobrepostos com queda suave se leem como poças de cor, como tinta se espalhando na água. Essa é a ideia por trás dos [degradês de malha](https://gradiently.design/pt-br/guide/mesh-gradients), e você pode aproximá-la com degradês radiais em camadas.

- Poça de pêssego sobre creme: `radial-gradient(ellipse 60% 45% at 30% 35%, #f4a99a 0%, #f6e4d8 55%, #faf3ec 100%)`
- Seixo de sálvia sobre névoa: `radial-gradient(ellipse 55% 70% at 70% 60%, #8fb9a8 0%, #d6e6dc 50%, #f3f5ef 100%)`
- Brilho de ameixa sobre noite: `radial-gradient(ellipse 70% 50% at 50% 70%, #6b4fa0 0%, #2c2147 50%, #15111f 100%)`

Poças elípticas suaves. Elipses fora do centro e levemente esticadas parecem muito mais naturais que um círculo central perfeito.

## Uma forma blob em CSS para copiar

Na web, o blob mais simples usa `border-radius` com oito valores: quatro raios horizontais, uma barra e quatro verticais. Animar entre dois conjuntos de valores faz a forma respirar devagar. A [referência de border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) da MDN explica a sintaxe.

```css
.blob {
  width: 320px;
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #f4a99a, #d9776a);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: breathe 12s ease-in-out infinite alternate;
}

.blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

@keyframes breathe {
  to { border-radius: 58% 42% 38% 62% / 55% 61% 39% 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}
```

Um blob que também funciona como moldura de foto. A animação lenta e alternada para para quem prefere movimento reduzido.

Para contornos mais complexos, desenhe a forma como um caminho SVG e use-a com `clip-path`. Mantenha o caminho em poucas curvas suaves, pelos mesmos motivos de quando se desenha à mão. Se a marca também precisa de calor na cor e na tipografia, o [branding descontraído](https://gradiently.design/pt-br/guide/playful-design) combina naturalmente com formas suaves.

## FAQ

### O que são formas orgânicas no design?

Formas irregulares e fluidas, como blobs, seixos, folhas, ondas e arcos, que parecem naturais e não construídas por regras como quadrados e círculos.

### O que as formas orgânicas comunicam?

Suavidade, calma, calor e um toque humano. Por isso são comuns em marcas de bem-estar, comida, beleza e infantis.

### Como faço uma forma blob em CSS?

Dê a um elemento largura e altura iguais e um `border-radius` de oito valores, como `42% 58% 63% 37% / 41% 44% 56% 59%`. Anime entre dois conjuntos de valores para uma transformação lenta.

### Como coloco uma foto numa forma blob?

Recorte-a com uma máscara blob na sua ferramenta de design ou, na web, dê à imagem o mesmo `border-radius` ou um `clip-path` SVG. O Studio do Gradiently recorta fotos direto em blobs, arcos e círculos.

### Formas orgânicas e geométricas podem ser usadas juntas?

Sim. Uma grade geométrica para texto e layout com uma forma orgânica para dar calor é uma combinação comum e equilibrada.