# Fundos abstratos: formas, campos e fluxo

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

Fundos abstratos passam clima sem contar uma história, e por isso estão atrás de tantos títulos, slides e páginas de produto. Escolher o tipo certo de abstração é quase todo o trabalho.

## The short version

- Um fundo abstrato é um fundo feito de cor, forma e textura, e não de uma cena ou objeto reconhecível.
- A maioria dos fundos abstratos cai em três tipos: geométricos (bordas duras e padrões), fluidos (misturas suaves e campos que fluem) e texturizados (grão, ruído e material).
- Fundos geométricos transmitem estrutura e precisão, fundos fluidos parecem calmos ou vivos, e fundos texturizados parecem físicos e feitos à mão.
- Fundos abstratos ainda precisam de uma área calma, com luminosidade uniforme, onde o texto vai ficar.
- Muitos fundos geométricos e fluidos podem ser feitos só com CSS, usando gradientes lineares, radiais, cônicos e repetidos.

Um **fundo abstrato** é feito de cor, forma e textura, e não de uma cena reconhecível. Quase todos pertencem a uma de três famílias: fundos **geométricos**, feitos de bordas duras, listras e padrões; fundos **fluidos**, feitos de misturas suaves e campos que fluem; e fundos **texturizados**, feitos de grão, ruído e material. Escolha a família que combina com a sensação que você quer e mantenha uma área calma onde o texto vai ficar.

Este guia percorre cada família com exemplos ao vivo e códigos, mostra quando usar cada uma e como impedir que um fundo abstrato ofusque o conteúdo. Para os tipos de gradiente que estão por baixo de muitos deles, veja os [tipos de gradiente](https://gradiently.design/pt-br/guide/types-of-gradients).

## Três tipos de fundo abstrato

| Tipo | Feito de | Transmite | Combina com |
| --- | --- | --- | --- |
| Geométrico | Paradas duras, listras, grades, círculos, cunhas | Estrutura, precisão, energia | Tecnologia, esporte, eventos, layouts editoriais |
| Fluido | Gradientes suaves, mesh, brilhos, faixas que fluem | Calma, vida, sofisticação | Marcas, páginas de produto, bem-estar, música |
| Texturizado | Grão, ruído, papel, tecido, vidro | Físico, artesanal, acolhedor | Artesanato, comida, impressão, moda, tudo o que é feito à mão |

As três famílias. Muitos bons fundos combinam duas, como um gradiente fluido com grão fino.

## Fundos abstratos geométricos

Fundos geométricos usam bordas nítidas: divisões, listras, anéis, cunhas e grades. Parecem intencionais e estruturados, e combinam naturalmente com layouts tipográficos fortes, como o [estilo suíço](https://gradiently.design/pt-br/guide/swiss-design). No CSS, paradas de cor duras (duas cores na mesma posição) criam as bordas.

- Divisão diagonal: `linear-gradient(135deg, #0f172a 0% 50%, #f97316 50% 100%)`
- Listras tonais: `repeating-linear-gradient(45deg, #1e1b4b 0 18px, #312e81 18px 36px)`
- Cor em quatro partes: `conic-gradient(from 45deg, #f43f5e 0 25%, #f59e0b 0 50%, #10b981 0 75%, #3b82f6 0)`
- Raios de sol: `repeating-conic-gradient(from 0deg at 50% 100%, #fde68a 0deg 6deg, #fb923c 6deg 12deg)`
- Anéis concêntricos: `repeating-radial-gradient(circle at 50% 50%, #0b132b 0 14px, #1c2541 14px 28px)`
- Três faixas: `linear-gradient(90deg, #111827 0% 33.3%, #7c3aed 33.3% 66.6%, #f5f3ff 66.6% 100%)`

Seis fundos geométricos, cada um um único gradiente CSS com paradas duras. As versões tonais, como as listras e os anéis, são calmas o bastante para receber texto.

O segredo dos fundos geométricos é o tom. Listras ou xadrezes de alto contraste vibram e deixam o texto por cima quase ilegível. Mantenha as cores do padrão próximas em luminosidade, como nas listras e nos anéis tonais acima, e reserve o alto contraste para áreas sem palavras. O guia de [padrões CSS](https://gradiently.design/pt-br/guide/css-patterns) traz muitos outros.

## Fundos abstratos fluidos

Fundos fluidos não têm bordas: a cor se acumula, escorre e se dobra como luz sobre a água ou a seda. Incluem gradientes mesh, brilhos de aurora e fitas que fluem. Parecem mais calmos e sofisticados que os geométricos, e são os fundos abstratos mais fáceis de receber texto, porque um campo suave tem grandes áreas uniformes.

- Crepúsculo líquido: `radial-gradient(ellipse at 20% 30%, #ff7a59 0%, #c43d7a 40%, #2b1055 100%)`
- Fita de aurora: `linear-gradient(170deg, #03121f 0%, #0b3b3a 40%, #2dd4bf 55%, #0b3b3a 70%, #03121f 100%)`
- Água profunda: `radial-gradient(ellipse at 70% 70%, #a5f3fc 0%, #60a5fa 35%, #3730a3 75%, #1e1b4b 100%)`
- Flor pastel: `radial-gradient(circle at 35% 40%, #fef3c7 0%, #fbcfe8 40%, #c4b5fd 80%, #a78bfa 100%)`

Campos fluidos como gradientes únicos. Fundos fluidos de verdade sobrepõem vários deles, e é assim que os gradientes mesh em CSS são feitos.

```css
.fluid {
  background-color: #2b1055;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #ff7a59cc, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, #c43d7acc, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, #5b3cc4cc, transparent 70%);
}
```

Um fundo fluido feito de três brilhos radiais sobrepostos sobre uma base escura. Mova as posições de `at` para conduzir onde a luz se acumula.

Fundos fluidos vêm em estilos com nome: os [gradientes mesh](https://gradiently.design/pt-br/guide/mesh-gradients) misturam vários pontos de cor numa superfície, e os [gradientes aurora](https://gradiently.design/pt-br/guide/aurora-gradients) fazem poças luminosas flutuarem sobre uma base escura. Os dois ficam melhores com um pouco de grão por cima.

## Fundos abstratos texturizados

A textura transforma a cor chapada numa superfície que você quase pode tocar. Um grão fino lembra filme, uma trama mais áspera lembra papel, fibras suaves lembram tecido, um desfoque fosco lembra vidro. A textura pode ser o fundo inteiro, como num campo cor de papel, ou uma camada sobre um gradiente, que é como a maioria dos fundos de gradiente com ar sofisticado é feita.

Um post em retrato no estilo de diário, com um título sobre um fundo quente de textura suave

Um campo texturizado para uma marca artesanal: a própria superfície define o tom.

Um anúncio de lançamento em retrato, com um título sobre um gradiente fluido liso e frio

Um campo fluido para o lançamento de um software: calmo, claro e limpo.

Mantenha a textura sutil quando houver texto por cima: o suficiente para sentir à distância de um braço, mas não tanto que as letras pareçam sujas. O guia de [textura de fundo](https://gradiently.design/pt-br/guide/background-texture) trata de grão, papel, tecido e vidro em detalhe, e o de [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients) explica por que um pouco de ruído faz a cor parecer cara.

## Como fazer um fundo abstrato com as cores da marca

Os melhores fundos abstratos parecem abstratos, mas pertencem a alguém. Partir das suas próprias cores e formas, e não de um pacote pronto, é o que faz isso acontecer.

1. **Pegue duas ou três cores da marca** Acrescente um tom mais profundo da mesma família para dar profundidade. O guia [como escolher as cores da marca](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors) ajuda se você ainda não as tem.
2. **Escolha uma família** Geométrico se a sua marca é precisa ou enérgica, fluido se é calma ou sofisticada, texturizado se é artesanal ou acolhedora.
3. **Pegue uma forma emprestada da marca** Uma curva do logo, o ângulo de uma letra, um círculo de um ícone. Repeti-la no fundo une os dois.
4. **Planeje a zona de silêncio** Decida onde o texto vai ficar em cada formato e mantenha essa área uniforme em luminosidade.
5. **Deixe a textura para o fim** Um grão leve sobre tudo, e depois confira no tamanho de celular, com palavras de verdade por cima.

## Escolhendo um fundo abstrato para cada trabalho

### Evite

- Padrões de alto contraste atrás de texto corrido
- Três tipos de abstração num mesmo design
- Formas aleatórias sem relação com a marca
- Um fundo tão carregado que vira a mensagem

### Faça

- Padrões tonais, ou mantenha os padrões longe das palavras
- Um só tipo, com a textura como camada de apoio
- Formas e cores que ecoam a sua marca
- Um fundo que define o clima e depois recua

Combine a abstração com o conteúdo. Um slide cheio de dados pede um campo fluido ou tonal e silencioso. Um post de lançamento aguenta uma divisão geométrica ousada. Um cardápio ou um produto artesanal pede textura. E, seja qual for a escolha, teste no tamanho real, com as palavras reais por cima, porque fundos abstratos lindos vazios costumam brigar com o texto quando ele chega.

Os Marks do Gradiently são abstrações fluidas e texturizadas em um só: cores, até três materiais empilhados, luz, grão e movimento, renderizados ao vivo atrás do seu design, com a área mais calma deslocada para trás das palavras. Você pode explorá-los no Mercado ou criar um na Forge.

## FAQ

### O que é um fundo abstrato?

Um fundo feito de cor, forma e textura, e não de uma cena reconhecível. A maioria é geométrica, fluida ou texturizada, ou uma combinação.

### Como faço um fundo abstrato em CSS?

Use gradientes lineares, cônicos e repetidos com paradas duras para padrões geométricos, e gradientes radiais em camadas para campos fluidos. Acrescente uma camada de ruído em SVG para dar textura.

### Qual fundo abstrato é melhor para texto?

Os fundos fluidos, com áreas grandes e uniformes, são os mais fáceis, seguidos dos padrões geométricos tonais. Evite padrões de alto contraste atrás das palavras.

### O que faz um fundo abstrato parecer sofisticado?

Contenção: uma paleta limitada, luz suave, textura fina e uma área calma onde o conteúdo fica. Abstrações carregadas e de alto contraste costumam parecer mais baratas.