# Degradados líquidos: color fluido que parece vertido

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

Los degradados líquidos parecen pintura vertida sobre un lienzo o tinta que se enrosca en el agua. Se crean doblando bandas de color, no fundiéndolas. Así se hace.

## The short version

- Un degradado líquido parece vertido porque sus colores se mantienen como bandas separadas que se doblan, giran, se estrechan y se ensanchan, en lugar de fundirse de forma uniforme.
- La forma habitual de crearlo es empezar con franjas rectas de color y deformarlas con un filtro de deformación, licuado o desplazamiento.
- En la web, un filtro SVG que combina feTurbulence y feDisplacementMap puede convertir un degradado CSS a rayas en una superficie líquida y marmolada.
- Las bandas finas y claras a lo largo de las curvas se leen como luz sobre una superficie mojada y hacen el efecto mucho más convincente.
- Los degradados líquidos están muy cargados, así que el texto necesita una zona tranquila o una forma grande y sencilla donde el flujo se calme.

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.

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

Franjas listas para deformar. El metal fundido tiene bandas claras y nítidas entre otras oscuras, que se convierten en brillos cromados al doblarlas.

- Índigo profundo: #1e1b4b
- Ultramar: #4f46e5
- Rosa vertido: #f472b6
- Brillo crema: #fde68a
- Célula turquesa: #0d9488

Una paleta de vertido: una base oscura, dos medios intensos, un brillo claro usado en líneas finas y un acento que aparece en pequeñas células.

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. **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. **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. **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. **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. **Recorta la mejor parte** La deformación deja bordes desordenados. Recorta la zona más interesante y ajústala a tu formato.
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](https://gradiently.design/es/guide/photoshop-gradient) y [degradados en Procreate](https://gradiently.design/es/guide/procreate-gradient) 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.

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

Bandas de acrílico vertido dobladas por un filtro de desplazamiento SVG. Cambia el seed para obtener otro vertido con los mismos colores.

> **Renderiza una vez para superficies grandes** Los filtros de desplazamiento son costosos en elementos grandes. Para un fondo de página completa, renderiza el resultado como imagen al tamaño que necesites, o mantén pequeño el elemento filtrado. [feTurbulence en SVG](https://gradiently.design/es/guide/svg-noise-filter) explica los parámetros, y los [degradados WebGL](https://gradiently.design/es/guide/shader-gradients) son el camino para un líquido que se mueve en tiempo real.

## 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](https://gradiently.design/es/guide/animated-gradient-background) cubre enfoques más ligeros.

## Cómo poner texto sobre un degradado líquido

### Lucha con el texto

- Bandas finas y de mucho contraste detrás del titular
- Remolinos por todas partes con la misma densidad
- Texto pequeño sobre el charco más cargado
- Brillos que cruzan las letras

### Sostiene el texto

- Una banda amplia y tranquila donde el flujo se calma
- Remolinos en los bordes, calma en el centro
- Tipografía grande y gruesa con pocas palabras
- Brillos alejados del texto

Un post vertical con la palabra Vierte en tipografía grande sobre un degradado líquido fluido

Una palabra, tipografía gruesa, sobre un tramo tranquilo de color.

Una portada musical cuadrada titulada Resaca sobre un fondo degradado líquido en remolino

Una portada cuadrada de lanzamiento. Los looks líquidos le van a la música porque parecen sonido hecho visible.

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](https://gradiently.design/es/guide/text-on-gradient) para la parte de legibilidad.

## FAQ

### ¿Cómo se hace un degradado líquido?

Dibuja franjas de color y dóblalas con una herramienta de deformación, remolino o licuar hasta que se arremolinen. Añade brillos finos y claros a lo largo de algunas curvas y un poco de grano.

### ¿Se puede hacer un degradado líquido en CSS?

Sobre todo con ayuda de SVG. Aplica un filtro SVG con `feTurbulence` y `feDisplacementMap` a un degradado CSS a rayas para doblarlo en un patrón líquido.

### ¿Qué diferencia hay entre un degradado líquido y un degradado de malla?

Un degradado de malla funde los colores con suavidad sobre una cuadrícula. Un degradado líquido mantiene los colores como bandas distintas que se enroscan y se estiran, como pintura vertida.

### ¿Qué colores funcionan en un degradado líquido?

Una base oscura, dos colores medios intensos y un tono claro usado solo en bandas finas. El contraste entre bandas oscuras gruesas y bandas claras finas es lo que se lee como líquido.