# Fundos abstratos: formas, campos de cor e fluxo

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

Os fundos abstratos transmitem um ambiente sem contar uma história, e é por isso que estão atrás de tantos títulos, diapositivos 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 um objeto reconhecível.
- A maioria dos fundos abstratos divide-se em três tipos: geométricos (arestas vivas e padrões), fluidos (misturas suaves e campos de cor em movimento) e texturados (grão, ruído e matéria).
- Os fundos geométricos parecem estruturados e precisos, os fluidos parecem calmos ou vivos, e os texturados parecem físicos e feitos à mão.
- Um fundo abstrato continua a precisar de uma zona calma, de luminosidade uniforme, onde vai ficar o texto.
- Muitos fundos geométricos e fluidos podem ser construídos só com CSS, com 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**, construídos com arestas vivas, riscas e padrões; fundos **fluidos**, construídos com misturas suaves e campos de cor em movimento; e fundos **texturados**, construídos com grão, ruído e matéria. Escolhe a família que corresponde à sensação de que precisas e mantém uma zona calma onde vão ficar as palavras.

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

## Três tipos de fundo abstrato

| Tipo | Feito de | Transmite | Serve para |
| --- | --- | --- | --- |
| Geométrico | Paragens vivas, riscas, grelhas, círculos, cunhas | Estrutura, precisão, energia | Tecnologia, desporto, eventos, layouts editoriais |
| Fluido | Gradientes suaves, malhas, brilhos, faixas em movimento | Calma, vida, requinte | Marcas, páginas de produto, bem-estar, música |
| Texturado | Grão, ruído, papel, tecido, vidro | Físico, artesanal, caloroso | 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

Os fundos geométricos usam arestas nítidas: divisões, riscas, anéis, cunhas e grelhas. Parecem intencionais e estruturados, e combinam naturalmente com layouts tipográficos fortes, como o [estilo suíço](https://gradiently.design/pt-pt/guide/swiss-design). Em CSS, as paragens de cor vivas (duas cores na mesma posição) criam as arestas.

- Divisão diagonal: `linear-gradient(135deg, #0f172a 0% 50%, #f97316 50% 100%)`
- Riscas tonais: `repeating-linear-gradient(45deg, #1e1b4b 0 18px, #312e81 18px 36px)`
- Cor em quartos: `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 paragens vivas. As versões tonais, como as riscas e os anéis, são calmas o suficiente para texto.

O segredo dos fundos geométricos é o tom. Riscas ou xadrezes de alto contraste vibram e tornam quase impossível ler o texto por cima. Mantém as cores do padrão próximas em luminosidade, como nas riscas e nos anéis tonais acima, e guarda o contraste forte para as zonas sem palavras. Os [padrões CSS](https://gradiently.design/pt-pt/guide/css-patterns) têm muitos mais.

## Fundos abstratos fluidos

Os fundos fluidos não têm arestas: a cor acumula-se, desliza e dobra-se como a luz na água ou na seda. Incluem gradientes de malha, brilhos de aurora e fitas em movimento. Parecem mais calmos e requintados do que os geométricos e são os fundos abstratos mais fáceis de usar com 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%)`
- Águas fundas: `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. Os fundos fluidos a sério sobrepõem vários destes, que é como se constroem os gradientes de malha em CSS.

```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. Move as posições `at` para orientar onde a luz se concentra.

Os fundos fluidos têm estilos com nome: os [gradientes de malha](https://gradiently.design/pt-pt/guide/mesh-gradients) misturam vários pontos de cor numa superfície, e os [gradientes de aurora](https://gradiently.design/pt-pt/guide/aurora-gradients) fazem flutuar manchas luminosas sobre uma base escura. Ambos ficam melhor com um pouco de grão por cima.

## Fundos abstratos texturados

A textura transforma a cor lisa numa superfície que quase se pode tocar. O grão fino lembra película, um relevo mais grosso lembra papel, fibras suaves lembram tecido, um desfoque baço lembra vidro. A textura pode ser o fundo todo, como num campo cor de papel, ou uma camada sobre um gradiente, que é como se fazem quase todos os fundos de gradiente com ar sofisticado.

Uma publicação vertical em estilo de diário, com um título sobre um fundo quente de textura suave

Um campo texturado para uma marca artesanal: a própria superfície dá o tom.

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

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

Mantém a textura subtil quando há texto por cima: o suficiente para se sentir à distância de um braço, não tanto que as letras pareçam sujas. O [fundo com textura](https://gradiently.design/pt-pt/guide/background-texture) trata em detalhe do grão, do papel, do tecido e do vidro, e os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) explicam porque é que um pouco de ruído faz a cor parecer cara.

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

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

1. **Escolhe duas ou três cores da marca** Acrescenta um tom mais profundo da mesma família para dar profundidade. Se ainda não as tens, [como escolher as cores da marca](https://gradiently.design/pt-pt/guide/how-to-choose-brand-colors) ajuda.
2. **Escolhe uma família** Geométrico se a tua marca é precisa ou enérgica, fluido se é calma ou requintada, texturado se é artesanal ou calorosa.
3. **Pede uma forma emprestada à marca** Uma curva do logótipo, o ângulo de uma letra, um círculo de um ícone. Repeti-lo no fundo une os dois.
4. **Planeia a zona calma** Decide onde vai o texto em cada formato e mantém essa área uniforme em luminosidade.
5. **Acrescenta a textura no fim** Um grão leve sobre tudo e depois confere-o no tamanho de telemóvel, com palavras a sério por cima.

## Escolher um fundo abstrato para cada trabalho

### Evita

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

### Faz

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

Ajusta a abstração ao conteúdo. Um diapositivo cheio de dados pede um campo fluido ou tonal e discreto. Uma publicação de lançamento aguenta uma divisão geométrica ousada. Um menu ou um produto artesanal pede textura. E o que quer que escolhas, testa-o no tamanho real e com as palavras reais, porque os fundos abstratos que ficam lindos vazios costumam lutar com o texto quando ele chega.

Os Marks da Gradiently são abstrações fluidas e texturadas em simultâneo: cores, até três materiais sobrepostos, luz, grão e movimento, desenhados ao vivo atrás do teu design, com a zona mais calma deslocada para trás das palavras. Podes vê-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 texturada, ou uma combinação.

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

Usa gradientes lineares, cónicos e repetidos com paragens vivas para padrões geométricos, e gradientes radiais sobrepostos para campos fluidos. Acrescenta uma camada de ruído SVG para dar textura.

### Que 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. Evita 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 zona calma onde fica o conteúdo. A abstração carregada e de alto contraste costuma parecer mais barata.