Gradient Background

A vibrant animated WebGL gradient background with customizable backdrop blur, ideal for immersive UI experiences. Provides dynamic color wave distortion with subtle vignette and extrusion glow. Suited for modern and expressive design themes.

...

How to Import

Add this import to your component file

app/page.tsx

1import GradientBackground from '@/components/lightswind/gradient-background';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

backdropBlurAmount	BlurSize	"none"	Sets the intensity of backdrop blur over the animated canvas. Acceptable values: "none", "sm", "md", "lg", "xl", "2xl", "3xl".	Optional
className	string	""	Optional Tailwind CSS class string for additional styling of the outer container (e.g., border, height, padding).	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import GradientBackground from '@/components/lightswind/gradient-background';
2
3// Basic usage with default (no) blur
4<GradientBackground />
5
6// With a medium backdrop blur
7<GradientBackground backdropBlurAmount="md" />
8
9// With maximum blur and a custom class for border styling
10<GradientBackground backdropBlurAmount="3xl" className="border-2 border-indigo-700 rounded-2xl" />
11
12// With a responsive height and full screen width
13<GradientBackground className="h-[60vh] w-screen" />
14
15// Combining all props
16<GradientBackground backdropBlurAmount="xl" className="rounded-xl shadow-xl border border-neutral-800" />

Previousgrid-dot-backgrounds

Nexthell-background

A product byＭＵＨＩＬＡＮ and Team❤️.

Gradient Background

A vibrant animated WebGL gradient background with customizable backdrop blur, ideal for immersive UI experiences. Provides dynamic color wave distortion with subtle vignette and extrusion glow. Suited for modern and expressive design themes.

...

How to Import

Add this import to your component file

app/page.tsx

1import GradientBackground from '@/components/lightswind/gradient-background';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

backdropBlurAmount	BlurSize	"none"	Sets the intensity of backdrop blur over the animated canvas. Acceptable values: "none", "sm", "md", "lg", "xl", "2xl", "3xl".	Optional
className	string	""	Optional Tailwind CSS class string for additional styling of the outer container (e.g., border, height, padding).	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import GradientBackground from '@/components/lightswind/gradient-background';
2
3// Basic usage with default (no) blur
4<GradientBackground />
5
6// With a medium backdrop blur
7<GradientBackground backdropBlurAmount="md" />
8
9// With maximum blur and a custom class for border styling
10<GradientBackground backdropBlurAmount="3xl" className="border-2 border-indigo-700 rounded-2xl" />
11
12// With a responsive height and full screen width
13<GradientBackground className="h-[60vh] w-screen" />
14
15// Combining all props
16<GradientBackground backdropBlurAmount="xl" className="rounded-xl shadow-xl border border-neutral-800" />

Previousgrid-dot-backgrounds

Nexthell-background

A product byＭＵＨＩＬＡＮ and Team❤️.

Gradient Background

How to Import

Props

Basic Usage

On This Page

Contribute

Gradient Background

How to Import

Props

Basic Usage

On This Page

Contribute

React Gradient Background Component - Lightswind UI

Key Details of React Gradient Background

Gradient Background

How to Import

Props

Basic Usage

On This Page

Contribute

Gradient Background

How to Import

Props

Basic Usage

On This Page

Contribute