Background Gradient

Overview

The Background Gradient renders a slowly animating field of soft, blurred color blobs onto a full-viewport <canvas>. It is intended as a decorative backdrop for hero sections, landing pages, and empty states, sitting behind foreground content.

Usage

Import the component:

import { BgGradient } from "@eqtylab/equality";

Basic usage. theme is required; placement defaults to "full". Wrap it in a positioned, sized container so the canvas has room to fill:

<div className="relative h-150 w-full *:size-full">
  <BgGradient theme="primary" />
</div>

Theme Variants

Set the theme prop to any brand color key to recolor the gradient.

Primary

Secondary

Green

Red

Yellow

Usage

<BgGradient theme="primary" />
<BgGradient theme="secondary" />
<BgGradient theme="green" />
<BgGradient theme="red" />
<BgGradient theme="yellow" />

Placement Variants

Use the placement prop to control where the blobs are distributed. "full" (the default) scatters four blobs around all four corners, while "top" uses two blobs anchored near the top edge for a subtler decoration that leaves the lower area clear for content.

Placement Full

Placement Top

Usage

<BgGradient theme="primary" placement="full" />
<BgGradient theme="primary" placement="top" />

Props