Gradientes líquidos: cor fluida que parece derramada

Um gradiente líquido é cor que parece derramada em vez de misturada: faixas de matiz que se enrolam umas nas outras, afinam num sítio e acumulam-se noutro, com um brilho de luz ao longo das curvas. Pensa em pinturas de acrílico derramado, guardas marmoreadas, óleo numa estrada molhada ou tinta largada na água. O surpreendente é como se fazem. Não se misturam cores para lá chegar; começa-se com riscas limpas e dobram-se. É por isso que uma ferramenta de gradientes normal nunca produz este visual por si só.

O que faz a cor parecer líquida

• Faixas, não esbatidos. Cada cor mantém a sua identidade como uma fita. Um esbatido largo e suave lê-se como ar, não como líquido.
• Espessura variável. A mesma faixa incha e estreita ao avançar, como a tinta quando flui.
• Sem cantos. Cada viragem é uma curva. Um ângulo agudo quebra a ilusão.
• Luz nas curvas. Uma linha fina e clara ao longo de alguns bordos lê-se como um reflexo molhado.
• Uma só 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 irias dobrar. Cada uma é um único valor CSS, por isso podes copiá-la como ponto de partida para qualquer dos métodos abaixo.

Repara na cor pálida. Numa pintura de derrame, o tom mais claro costuma ser a faixa mais fina, e é ele que faz as cores mais escuras à volta parecerem ricas. Usa-o como um brilho, não como preenchimento.

Como fazer um gradiente líquido numa ferramenta de design

1. 1

   Desenha riscas

   Preenche uma tela maior do que o tamanho final com cinco a oito faixas de cor em ângulo. Faz algumas largas e outras muito finas.

2. 2

   Deforma tudo

   Usa uma distorção de deformação, torção ou onda para dobrar as riscas numa ampla curva em S. Mantém a primeira passagem suave.

3. 3

   Empurra com um pincel liquify

   Com um pincel grande e suave, arrasta as faixas numa direção para criar redemoinhos e poças. Trabalha do grande para o pequeno.

4. 4

   Junta alguns brilhos

   Pinta linhas finas e claras ao longo de duas ou três curvas, seguindo o fluxo, com baixa opacidade.

5. 5

   Corta a melhor parte

   A distorção deixa bordos desarrumados. Corta a secção mais interessante e dimensiona-a para o teu formato.

6. 6

   Termina com grão

   Uma camada leve de ruído esconde qualquer banding do esticar e dá à superfície uma sensação tátil.

O software difere nos nomes, mas a maioria dos editores tem uma deformação e uma ferramenta liquify ou de esborratar. Gradientes no Photoshop e gradientes no Procreate 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. O feTurbulence gera ruído suave e o feDisplacementMap usa-o para empurrar os píxeis de um gradiente às riscas. Um baseFrequency baixo dá redemoinhos amplos e lentos; um scale alto empurra as faixas mais longe.

<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>

Como pôr os gradientes líquidos em movimento

O líquido é o estilo de gradiente que quase pede para se mexer. Um derrame que deriva devagar no hero de um site ou num Story parece vivo. Mantém a velocidade baixa, como se a tinta fosse espessa, e faz um ciclo em que o fim coincida com o princípio. Animar a turbulência em direto é pesado, por isso um pequeno ciclo de vídeo exportado costuma ser o melhor caminho. Um ciclo de 8 a 15 segundos dá a um derrame tempo para viajar sem que ninguém repare na repetição, e um MP4 a 1080×1920 serve Stories, Reels e papéis de parede de telemóvel com um só ficheiro. Fundos de gradiente animados trata de abordagens mais leves.

Como pôr palavras num gradiente líquido

Os Marks do Gradiently são fundos vivos cujos materiais podem fluir e derivar, e cada um move automaticamente a parte mais calma da sua superfície para trás das tuas palavras. O Pro exporta-os como GIF, MP4 ou WebM, por isso um visual líquido pode tornar-se um Story ou um ciclo de hero sem construíres um shader. Lê texto sobre gradiente para o lado da legibilidade.