Degradados líquidos: color fluido que parece vertido

Un degradado líquido es color que parece vertido en lugar de mezclado: bandas de tono que se enroscan unas alrededor de otras, se estiran en un sitio y se remansan en otro, con un destello de luz en las curvas. Piensa en los cuadros de acrílico vertido, en las guardas marmoladas, en el aceite sobre una carretera mojada o en la tinta que cae en el agua. Lo sorprendente es cómo se hacen. No llegas ahí mezclando colores; empiezas con franjas limpias y las doblas. Por eso una herramienta de degradado normal nunca consigue el look por sí sola.

Qué hace que el color parezca líquido

• Bandas, no fundidos. Cada color conserva su identidad como una cinta. Un fundido ancho y suave se lee como aire, no como líquido.
• Grosor variable. La misma banda se ensancha y se estrecha a medida que avanza, como hace la pintura al fluir.
• Sin esquinas. Cada giro es una curva. Un solo ángulo agudo rompe la ilusión.
• Luz en las curvas. Una línea fina y clara a lo largo de algunos bordes se lee como un brillo húmedo.
• Una sola dirección de flujo. Los remolinos que se inclinan todos hacia el mismo lado parecen un único vertido.

Cuatro looks de degradado líquido

Estas muestras son la materia prima: las bandas de color que doblarías. Cada una es un único valor CSS, así que puedes copiarla como punto de partida para cualquiera de los métodos de abajo.

Fíjate en el color claro. En un cuadro de vertido, el tono más claro suele ser la banda más fina, y es lo que hace que los colores oscuros que lo rodean se vean ricos. Úsalo como un brillo, no como un relleno.

Cómo hacer un degradado líquido en una herramienta de diseño

1. 1

   Dibuja franjas

   Rellena un lienzo más grande que tu tamaño final con cinco a ocho bandas de color en ángulo. Haz algunas bandas anchas y otras muy finas.

2. 2

   Deforma el conjunto

   Usa una deformación de tipo warp, remolino u onda para doblar las franjas en una S amplia. Que la primera pasada sea suave.

3. 3

   Empuja con un pincel de licuar

   Con un pincel grande y suave, arrastra las bandas en una dirección para crear remolinos y charcos. Trabaja de lo grande a lo pequeño.

4. 4

   Añade algunos brillos

   Pinta líneas finas y claras a lo largo de dos o tres curvas, siguiendo el flujo, con poca opacidad.

5. 5

   Recorta la mejor parte

   La deformación deja bordes desordenados. Recorta la zona más interesante y ajústala a tu formato.

6. 6

   Termina con grano

   Una capa ligera de ruido oculta cualquier banda creada al estirar y da a la superficie un tacto real.

Cada programa lo llama de una forma, pero la mayoría de editores tienen una herramienta de deformación y otra de licuar o difuminar. Degradados en Photoshop y degradados en Procreate explican las herramientas concretas de cada uno.

Un degradado líquido con SVG y CSS

En la web, un filtro SVG puede encargarse de la deformación. feTurbulence genera un ruido suave y feDisplacementMap lo usa para desplazar los píxeles de un degradado a rayas. Un baseFrequency bajo da remolinos amplios y lentos; un scale alto empuja más las bandas.

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

Cómo dar movimiento a los degradados líquidos

El líquido es el único estilo de degradado que casi pide moverse. Un vertido que se desplaza despacio en la cabecera de una web o en una story parece vivo. Mantén la velocidad baja, como si la pintura fuera espesa, y haz un bucle para que el final coincida con el principio. Animar la turbulencia en directo es pesado, así que un bucle de vídeo corto exportado suele ser mejor opción. Un bucle de 8 a 15 segundos da tiempo al vertido para recorrer la imagen sin que nadie note la repetición, y un MP4 a 1080×1920 sirve para stories, reels y fondos de pantalla del móvil con un solo archivo. Fondos degradados animados cubre enfoques más ligeros.

Cómo poner texto sobre un degradado líquido

Los Marks de Gradiently son fondos vivos cuyos materiales pueden fluir y desplazarse, y cada uno coloca automáticamente la zona más tranquila de su superficie detrás de tus palabras. Pro los exporta como GIF, MP4 o WebM, así que un look líquido puede convertirse en una story o en un bucle de cabecera sin programar un shader. Lee texto sobre degradado para la parte de legibilidad.