# Gradiente líquido: cor em fluxo que parece derramada

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

Gradientes líquidos parecem tinta derramada numa tela ou nanquim se enrolando na água. Nascem de faixas de cor dobradas, não de cores misturadas. Veja como fazer.

## The short version

- Um gradiente líquido parece derramado porque suas cores continuam como faixas separadas que se dobram, giram, afinam e engrossam, em vez de se dissolver uniformemente umas nas outras.
- O jeito usual de fazer um é começar com listras retas de cor e distorcê-las com um filtro de deformação, liquidificação ou deslocamento.
- Na web, um filtro SVG que combina feTurbulence e feDisplacementMap pode transformar um gradiente CSS listrado em uma superfície líquida e marmorizada.
- Faixas finas e claras ao longo das curvas parecem luz refletida numa superfície molhada e deixam o efeito muito mais convincente.
- Gradientes líquidos são agitados, então o texto precisa de uma área calma ou de uma forma grande e simples, onde o fluxo desacelera.

Um **gradiente líquido** é cor que parece derramada, não misturada: faixas de matiz que se enroscam, esticam-se finas num ponto e se acumulam em outro, com um brilho de luz ao longo das curvas. Pense em pinturas de acrílico derramado, guardas de livro marmorizadas, óleo numa rua molhada ou nanquim pingado na água. O curioso é como são feitos. Você não mistura cores para chegar lá; começa com listras limpas e as dobra. Por isso uma ferramenta de gradiente comum nunca produz esse visual sozinha.

## O que faz a cor parecer líquida

- **Faixas, não degradês.** Cada cor mantém sua identidade como uma fita. Um degradê largo e suave parece ar, não líquido.
- **Espessura variável.** A mesma faixa incha e afina ao longo do caminho, como a tinta quando escorre.
- **Sem quinas.** Toda virada é uma curva. Um único ângulo agudo quebra a ilusão.
- **Luz nas curvas.** Uma linha fina e clara em algumas bordas lembra um brilho de superfície molhada.
- **Uma direção de fluxo.** Redemoinhos que se inclinam todos para o mesmo lado parecem um único derrame.

## Quatro estilos de gradiente líquido

Estas amostras são a matéria-prima: as faixas de cor que você vai dobrar. Cada uma é um único valor CSS, então você pode copiá-la como ponto de partida para qualquer método abaixo.

- Faixas de acrílico derramado: `repeating-linear-gradient(115deg, #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%)`
- Faixas de mármore: `repeating-linear-gradient(80deg, #f5f5f4 0%, #e7e5e4 7%, #a8a29e 9%, #f5f5f4 12%, #d6d3d1 18%)`
- Mancha de óleo: `conic-gradient(from 30deg at 40% 55%, #0f172a, #7c3aed, #06b6d4, #a3e635, #f59e0b, #db2777, #0f172a)`
- Metal derretido: `linear-gradient(100deg, #1c1917 0%, #57534e 18%, #e7e5e4 26%, #78716c 34%, #1c1917 52%, #a8a29e 66%, #fafaf9 72%, #44403c 86%, #1c1917 100%)`

Listras prontas para deformar. O metal derretido tem faixas nítidas e brilhantes entre as escuras, que viram reflexos de cromo depois de dobradas.

- Índigo profundo: #1e1b4b
- Ultramar: #4f46e5
- Rosa derramado: #f472b6
- Brilho creme: #fde68a
- Célula turquesa: #0d9488

Uma paleta de derrame: uma base escura, dois tons médios fortes, um brilho claro em linhas finas e um acento que aparece em pequenas células.

Repare na cor clara. Numa pintura de derrame, o tom mais claro costuma ser a faixa mais fina, e é ele que faz as cores escuras ao redor parecerem ricas. Use-o como realce, não como preenchimento.

## Como fazer um gradiente líquido em uma ferramenta de design

1. **Desenhe listras** Preencha uma tela maior que o tamanho final com cinco a oito faixas de cor em ângulo. Faça algumas largas e outras bem finas.
2. **Deforme tudo** Use uma distorção de deformação, torção ou onda para dobrar as listras numa ampla curva em S. Mantenha a primeira passada suave.
3. **Empurre com o pincel de liquidificar** Com um pincel grande e macio, arraste as faixas numa direção para criar redemoinhos e poças. Trabalhe do grande para o pequeno.
4. **Acrescente alguns realces** Pinte linhas finas e claras ao longo de duas ou três curvas, seguindo o fluxo, com pouca opacidade.
5. **Recorte a melhor parte** A distorção deixa bordas bagunçadas. Recorte a seção mais interessante e ajuste ao seu formato.
6. **Termine com granulação** Uma camada leve de ruído esconde o serrilhado do esticamento e dá à superfície uma sensação tátil.

Os nomes variam de programa para programa, mas a maioria dos editores tem uma deformação e uma ferramenta de liquidificar ou borrar. [Gradientes no Photoshop](https://gradiently.design/pt-br/guide/photoshop-gradient) e [gradientes no Procreate](https://gradiently.design/pt-br/guide/procreate-gradient) tratam das ferramentas específicas de cada um.

## Um gradiente líquido com SVG e CSS

Na web, um filtro SVG pode fazer a deformação. `feTurbulence` gera ruído suave, e `feDisplacementMap` o usa para empurrar os pixels de um gradiente listrado. Um `baseFrequency` baixo dá redemoinhos amplos e lentos; um `scale` alto empurra as faixas mais longe.

```html
<svg width="0" height="0" style="position:absolute">
  <filter id="liquid" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence type="fractalNoise" baseFrequency="0.003 0.006" numOctaves="2" seed="11" />
    <feDisplacementMap in="SourceGraphic" scale="220" xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>

<div class="liquid"></div>

<style>
  .liquid {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(115deg,
      #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%);
    filter: url(#liquid);
  }
</style>
```

Faixas de acrílico derramado dobradas por um filtro de deslocamento SVG. Mude o seed para obter outro derrame com as mesmas cores.

> **Renderize uma vez para superfícies grandes** Filtros de deslocamento são pesados em elementos grandes. Para o fundo de uma página inteira, renderize o resultado como imagem no tamanho de que precisa ou mantenha o elemento filtrado pequeno. [SVG feTurbulence](https://gradiently.design/pt-br/guide/svg-noise-filter) explica os parâmetros, e os [gradientes WebGL](https://gradiently.design/pt-br/guide/shader-gradients) são o caminho para um líquido que se move em tempo real.

## Como fazer gradientes líquidos se moverem

O líquido é o único estilo de gradiente que quase pede para se mover. Um derrame que flutua devagar no topo de um site ou num Story parece vivo. Mantenha a velocidade baixa, como se a tinta fosse espessa, e faça um loop em que o fim combine com o começo. Animar a turbulência ao vivo é pesado, então um loop curto de vídeo exportado costuma ser o melhor caminho. Um loop de 8 a 15 segundos dá ao derrame tempo de percorrer o quadro sem que ninguém note a repetição, e um MP4 em 1080×1920 serve Stories, Reels e papéis de parede de celular com um só arquivo. [Fundos de gradiente animado](https://gradiently.design/pt-br/guide/animated-gradient-background) traz abordagens mais leves.

## Como pôr texto sobre um gradiente líquido

### Briga com as palavras

- Faixas finas e de alto contraste atrás do título
- Redemoinhos por toda parte, com a mesma densidade
- Texto pequeno sobre a poça mais agitada
- Realces cruzando as letras

### Carrega as palavras

- Uma faixa larga e calma onde o fluxo desacelera
- Redemoinhos agitados nas bordas, calmos no meio
- Texto grande e pesado, com poucas palavras
- Realces longe do texto

Um post vertical com a palavra única Derrame em letras grandes sobre um gradiente líquido em fluxo

Uma palavra, letra pesada, sobre um trecho calmo de cor.

Uma capa de música quadrada chamada Undertow sobre um fundo de gradiente líquido em redemoinho

Uma capa quadrada de lançamento. Visuais líquidos combinam com música porque parecem som tornado visível.

Os Marks do Gradiently são fundos vivos cujos materiais podem fluir e flutuar, e cada um move automaticamente a parte mais calma da sua superfície para trás das suas palavras. O Pro os exporta em GIF, MP4 ou WebM, então um visual líquido pode virar um Story ou um loop de topo de site sem você construir um shader. Leia [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) para o lado da legibilidade.

## FAQ

### Como fazer um gradiente líquido?

Desenhe listras de cor e dobre-as com uma ferramenta de deformação, torção ou liquidificar até girarem. Acrescente realces finos e claros em algumas curvas e um pouco de granulação.

### Dá para fazer um gradiente líquido em CSS?

Principalmente com ajuda do SVG. Aplique um filtro SVG com `feTurbulence` e `feDisplacementMap` a um gradiente CSS listrado para dobrá-lo num padrão líquido.

### Qual a diferença entre um gradiente líquido e um gradiente de malha?

Um gradiente de malha mistura as cores suavemente numa grade. Um gradiente líquido mantém as cores como faixas distintas que se enroscam e esticam, como tinta derramada.

### Que cores funcionam num gradiente líquido?

Uma base escura, duas cores médias fortes e um tom claro usado só em faixas finas. O contraste entre faixas escuras grossas e claras finas é o que parece líquido.