Liquid Gradient

Liquid Gradient

Pro

Installation

ProRequires a Planes Pro license.

pnpm dlx shadcn add @useplanes/liquid-gradient

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 170 Pro components · lifetime updates.

I have a license Get Pro

import { LiquidGradient } from "@/components/ui/LiquidGradient";

<LiquidGradient className="h-[560px]">
  <h1 className="grid h-full place-items-center text-5xl text-white">
    Your headline
  </h1>
</LiquidGradient>

Use cases

Section or page background
A moving field of colour behind a headline, in place of a static gradient.
Brand or campaign colour
Swap colors for the campaign palette and the whole surface carries it.
Paired with Gradient Footer
Use the same inks above and below the page so the colour opens and closes it.