Gradiente líquido: cor em fluxo que parece derramada

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.

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

   Acrescente alguns realces

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

5. 5

   Recorte a melhor parte

   A distorção deixa bordas bagunçadas. Recorte a seção mais interessante e ajuste ao seu formato.

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

<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 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 traz abordagens mais leves.

Como pôr texto sobre um gradiente líquido

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 para o lado da legibilidade.