Hell Background

An immersive WebGL shader background with a hellish glow and turbulence effect that reacts to cursor movement. Ideal for dark, moody UI themes with a dramatic impact. It supports backdrop blur and customizable glow color.

...

How to Import

Add this import to your component file

app/page.tsx

1import HellBackground from '@/components/lightswind/hell-background';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

backdropBlurAmount	BlurSize	"sm"	The backdrop blur intensity. Acceptable values: "none", "sm", "md", "lg", "xl", "2xl", "3xl". Default is "sm".	Optional
color	string	"#FF0000"	Hexadecimal color string defining the hell glow (e.g., "#FF0000"). Default is bright red.	Optional
className	string	""	Optional Tailwind CSS class string for styling the container div (e.g., border, padding, shadow).	Optional

Basic Usage

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

app/page.tsx

1import HellBackground from '@/components/lightswind/hell-background';
2
3// Basic usage with default blur and red glow
4<HellBackground />
5
6// With a larger backdrop blur
7<HellBackground backdropBlurAmount="xl" />
8
9// With no backdrop blur and a custom orange flame glow
10<HellBackground backdropBlurAmount="none" color="#FF4500" />
11
12// With a custom class name for additional styling
13<HellBackground className="border border-red-700 rounded-xl" />
14
15// Combining all props
16<HellBackground backdropBlurAmount="md" color="#FF0000" className="shadow-xl" />

Previousgradient-background

Nextinteractive-grid-background

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

Hell Background

An immersive WebGL shader background with a hellish glow and turbulence effect that reacts to cursor movement. Ideal for dark, moody UI themes with a dramatic impact. It supports backdrop blur and customizable glow color.

...

How to Import

Add this import to your component file

app/page.tsx

1import HellBackground from '@/components/lightswind/hell-background';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

backdropBlurAmount	BlurSize	"sm"	The backdrop blur intensity. Acceptable values: "none", "sm", "md", "lg", "xl", "2xl", "3xl". Default is "sm".	Optional
color	string	"#FF0000"	Hexadecimal color string defining the hell glow (e.g., "#FF0000"). Default is bright red.	Optional
className	string	""	Optional Tailwind CSS class string for styling the container div (e.g., border, padding, shadow).	Optional

Basic Usage

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

app/page.tsx

1import HellBackground from '@/components/lightswind/hell-background';
2
3// Basic usage with default blur and red glow
4<HellBackground />
5
6// With a larger backdrop blur
7<HellBackground backdropBlurAmount="xl" />
8
9// With no backdrop blur and a custom orange flame glow
10<HellBackground backdropBlurAmount="none" color="#FF4500" />
11
12// With a custom class name for additional styling
13<HellBackground className="border border-red-700 rounded-xl" />
14
15// Combining all props
16<HellBackground backdropBlurAmount="md" color="#FF0000" className="shadow-xl" />

Previousgradient-background

Nextinteractive-grid-background

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

Hell Background

How to Import

Props

Basic Usage

On This Page

Contribute

Hell Background

How to Import

Props

Basic Usage

On This Page

Contribute

React Hell Background Component - Lightswind UI

Key Details of React Hell Background

Hell Background

How to Import

Props

Basic Usage

On This Page

Contribute

Hell Background

How to Import

Props

Basic Usage

On This Page

Contribute