Liquid gradients: flowing colour that looks poured

A liquid gradient is colour that looks poured rather than blended: bands of hue that curl around each other, stretch thin in one place and pool in another, with a glint of light along the curves. Think of acrylic pour paintings, marbled endpapers, oil on a wet road or ink dropped into water. The surprising part is how they are made. You don't blend colours to get there; you start with clean stripes and bend them. That is why a normal gradient tool never quite produces the look on its own.

What makes colour look liquid

• Bands, not fades. Each colour keeps its identity as a ribbon. A wide soft fade reads as air, not liquid.
• Varying thickness. The same band swells and narrows as it travels, the way paint does when it flows.
• No corners. Every turn is a curve. One sharp angle breaks the illusion.
• Light on the curves. A thin pale line along a few edges reads as a wet highlight.
• One direction of flow. Swirls that all lean the same way feel like a single pour.

Four liquid gradient looks

These swatches are the raw material: the colour bands you would bend. Each is a single CSS value, so you can copy it as a starting point for any of the methods below.

Notice the pale colour. In a pour painting, the lightest tone is usually the thinnest band, and it is what makes the darker colours around it look rich. Use it like a highlight, not a fill.

How to make a liquid gradient in a design tool

1. 1

   Draw stripes

   Fill a canvas larger than your final size with five to eight bands of colour at an angle. Make some bands wide and some very thin.

2. 2

   Warp the whole thing

   Use a warp, twirl or wave distortion to bend the stripes into a broad S curve. Keep the first pass gentle.

3. 3

   Push with a liquify brush

   With a large, soft brush, drag the bands in one direction to create swirls and pools. Work big to small.

4. 4

   Add a few highlights

   Paint thin pale lines along two or three curves, following the flow, at low opacity.

5. 5

   Crop the best part

   Distortion leaves messy edges. Crop to the most interesting section and size it for your format.

6. 6

   Finish with grain

   A light noise layer hides any banding from the stretching and gives the surface a tactile feel.

Software differs in naming, but most editors have a warp and a liquify or smudge tool. Photoshop gradients and Procreate gradients cover the specific tools in each.

A liquid gradient with SVG and CSS

On the web, an SVG filter can do the warping. feTurbulence generates smooth noise, and feDisplacementMap uses it to push the pixels of a striped gradient around. A low baseFrequency gives broad, slow swirls; a high scale pushes the bands further.

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

Making liquid gradients move

Liquid is the one gradient style that almost asks to move. A pour that slowly drifts on a website hero or a Story feels alive. Keep the speed low, as if the paint were thick, and loop it so the end matches the start. Animating the turbulence live is heavy, so a short exported video loop is usually the better route. A loop of 8 to 15 seconds gives a pour enough time to travel without anyone spotting the repeat, and an MP4 at 1080×1920 serves Stories, Reels and phone wallpapers from one file. Animated gradient backgrounds covers lighter approaches.

Putting words on a liquid gradient

Gradiently's Marks are living backgrounds whose materials can flow and drift, and each one moves the calmest part of its surface behind your words automatically. Pro exports them as GIF, MP4 or WebM, so a liquid look can become a Story or a hero loop without building a shader. Read text on a gradient for the legibility side.