---
title: Liquid Glass Background
description: A high-performance WebGL refractive liquid glass cylinder strips background with interactive fluid mouse blur, lens deflection, and chromatic dispersion.
---

<ComponentPreview name="liquid-glass-background-demo" />

## Premium Pro Component

This is a premium Pro component. To get access to its source code and advanced interactive configurations:
1. Visit the pricing page: [https://lightswind.com/pricing](https://lightswind.com/pricing)
2. Purchase a license to unlock this component.

If you have already purchased a license, you can install this component directly via our CLI:

```bash
npx lightswind@latest add liquid-glass-background
```

*(Note: Make sure you have configured your API key in your project to authenticate your Pro license).*

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx lightswind@latest add liquid-glass-background
```

</TabsContent>

<TabsContent value="manual">

> [!IMPORTANT]
> This is a premium component. Manual copy-paste source code is only available to Pro license holders.
> Please purchase a plan at [https://lightswind.com/pricing](https://lightswind.com/pricing) to unlock manual access, or use the authenticated CLI command:
> 
> ```bash
> npx lightswind@latest add liquid-glass-background
> ```

</TabsContent>

</Tabs>

## Usage

```tsx
import LiquidGlassBackground from "${proImport("liquid-glass-background")}"
```

```tsx
import LiquidGlassBackground from "${proImport("liquid-glass-background")}";

export function Demo() {
  return (
    <div className="relative w-full h-[600px] overflow-hidden rounded-2xl">
      <LiquidGlassBackground
        preset="electric-blue"
        cells={8}
        distortion={200}
        interactive={true}
        interactiveBlur={true}
      />
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description | Required |
| ---- | ---- | ------- | ----------- | -------- |
| `theme` | `'light' | 'dark' | 'system'` | `'system'` | Color theme mode. In light mode: dark top with pearl-white base. In dark mode: light platinum sheen top with obsidian base. 'system' syncs with site toggle. | No |
| `preset` | `string` | `'electric-blue'` | Color preset ('electric-blue' | 'neon-cyan' | 'violet-dusk' | 'emerald-flow' | 'amber-sunset' | 'monochrome' | 'aurora') | No |
| `cells` | `number` | `8` | Count of glass cylinder strip cells. | No |
| `distortion` | `number` | `200` | Glass refraction distortion strength. | No |
| `angle` | `number` | `47` | Diagonal tilt angle in degrees. | No |
| `speed` | `number` | `1.0` | Procedural wave animation speed. | No |
| `interactive` | `boolean` | `true` | Enable interactive mouse/touch tracking. | No |
| `interactiveBlur` | `boolean` | `true` | Enable fluid frosted blur following cursor. | No |
| `blurRadius` | `number` | `0.28` | Radius of interactive blur lens. | No |
| `blurIntensity` | `number` | `1.4` | Intensity multiplier of interactive blur. | No |
| `mouseDamping` | `number` | `0.08` | Smooth lerp inertia damping factor. | No |
| `grain` | `number` | `0.3` | Film grain noise intensity. | No |
| `aberration` | `number` | `0.39` | Chromatic aberration rainbow dispersion. | No |