# LiquidGlass

> Glass-like visual effect using SVG filters for chromatic displacement.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Effects
- Tags: glass, effect, svg, filter, chromatic, displacement, blur
- Docs: https://fancy-ui.rama.app/docs/components/liquid-glass
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/liquid-glass

## Import

```svelte
<script lang="ts">
  import { LiquidGlass } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { LiquidGlass } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `radius` | `number` | `16` | Border radius in pixels |
| `border` | `number` | `0.07` | Border thickness as fraction of min dimension |
| `lightness` | `number` | `50` | Background lightness percentage |
| `displace` | `number` | — | Optional Gaussian blur on the displacement output |
| `blend` | `string` | `"difference"` | SVG blend mode for the displacement channels |
| `xChannel` | `"R" \| "G" \| "B"` | `"R"` | X displacement channel selector |
| `yChannel` | `"R" \| "G" \| "B"` | `"B"` | Y displacement channel selector |
| `alpha` | `number` | `0.93` | Background fill alpha |
| `blur` | `number` | `11` | Blur applied to the background fill layer |
| `rOffset` | `number` | `0` | Red channel displacement offset |
| `gOffset` | `number` | `10` | Green channel displacement offset |
| `bOffset` | `number` | `20` | Blue channel displacement offset |
| `scale` | `number` | `-180` | Displacement scale |
| `frost` | `number` | `0.05` | Frosted glass opacity |
| `fallbackBlur` | `number` | `20` | Backdrop blur in pixels for the Safari fallback |
| `fallbackSaturation` | `number` | `180` | Backdrop saturation percentage for the Safari fallback |
| `containerClass` | `string` | `""` | CSS classes for the outer container |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Content rendered inside the glass effect |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { LiquidGlass } from "fancy-ui-svelte";
</script>

<div
	class="relative flex h-[400px] w-full items-center justify-center overflow-hidden rounded-lg border"
>
	<div
		class="absolute top-1/4 left-1/4 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/30 blur-3xl"
	></div>
	<div class="absolute right-1/4 bottom-1/3 h-64 w-64 rounded-full bg-cyan-500/30 blur-3xl"></div>
	<div
		class="absolute bottom-1/4 left-1/2 h-56 w-56 -translate-x-1/2 rounded-full bg-rose-500/25 blur-3xl"
	></div>

	<div class="absolute inset-0 z-[1] overflow-y-auto" style="scrollbar-width: none;">
		<div class="space-y-8 px-10 py-20" style="min-height: 220%;">
			{#each Array(6) as _, i}
				<div class="flex gap-4">
					{#each Array(5) as _, j}
						<div
							class="h-20 flex-1 rounded-xl"
							style="background: hsl({(i * 5 + j) * 28}, 65%, 55%); opacity: 0.75;"
						></div>
					{/each}
				</div>
				<p class="px-1 text-base font-medium text-white/50">Chromatic displacement in action.</p>
			{/each}
		</div>
	</div>

	<div class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
		<div class="pointer-events-auto">
			<LiquidGlass radius={20} frost={0.05}>
				<div
					class="text-foreground flex min-h-16 w-full items-center justify-center px-12 py-4 text-base font-medium"
				>
					Liquid Glass. Try scrolling.
				</div>
			</LiquidGlass>
		</div>
	</div>
</div>
```

### Landing Page Navbar

Landing page with a liquid glass pill navigation.

```svelte
<script lang="ts">
	import { LiquidGlass } from "fancy-ui-svelte";
</script>

<div class="relative h-[440px] w-full overflow-hidden rounded-lg border bg-[#fafafa]">
	<div class="absolute inset-0 overflow-y-auto" style="scrollbar-width: none;">
		<!-- Hero -->
		<div class="flex min-h-[420px] flex-col items-center justify-center px-8 pt-24 text-center">
			<span
				class="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-500"
			>
				Now available for macOS
			</span>
			<h1 class="mt-5 max-w-md text-4xl leading-tight font-semibold tracking-tight text-gray-900">
				Your UI, at the speed of thought.
			</h1>
			<p class="mt-4 max-w-sm text-sm text-gray-500">
				FancyOS turns your voice into polished interfaces. Speak naturally, ship beautifully.
			</p>
			<div class="mt-6 flex items-center gap-3">
				<span class="rounded-full bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white">
					Download
				</span>
				<span class="px-3 py-2.5 text-sm font-medium text-gray-600">Watch demo</span>
			</div>
		</div>

		<!-- Colorful sections to scroll behind the nav -->
		<div class="space-y-6 px-8 pb-12">
			{#each Array(6) as _, i}
				<div
					class="flex h-32 items-end rounded-3xl p-5"
					style="background: linear-gradient(120deg, hsl({210 + i * 40}, 75%, 62%), hsl({250 +
						i * 40}, 70%, 55%));"
				>
					<p class="text-sm font-semibold text-white/90">Feature {i + 1}</p>
				</div>
			{/each}
		</div>
	</div>

	<!-- Fixed pill nav -->
	<div class="pointer-events-none absolute inset-x-0 top-4 z-10 flex justify-center px-6">
		<div class="pointer-events-auto w-full max-w-lg">
			<LiquidGlass radius={9999} containerClass="w-full">
				<nav class="flex w-full items-center justify-between px-6 py-3">
					<span class="flex items-center gap-1.5 text-sm font-bold tracking-tight text-gray-900">
						<span class="inline-block size-4 rounded-full bg-gray-900"></span>
						FancyOS
					</span>
					<div class="flex items-center gap-5 text-[13px] font-medium text-gray-800">
						<span class="hidden sm:inline">Manifesto</span>
						<span class="hidden sm:inline">Pricing</span>
						<span class="hidden sm:inline">Blog</span>
						<span class="rounded-full bg-gray-900 px-3.5 py-1.5 text-xs font-semibold text-white">
							Download
						</span>
					</div>
				</nav>
			</LiquidGlass>
		</div>
	</div>
</div>
```