# Liquid Glass

Aperveil / Light, shaped for the web.

Collection: Free, available now.

A liquid glass effect for React and the web: thick glass shapes bend a bright wallpaper or your own image at their bezels, with specular edges, rendered live in WebGPU, Safari included.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

Liquid Glass sets thick, clear glass shapes over a bright ribbon wallpaper, or over an image or video you choose, after the material Apple introduced in 2025. Each shape is a slab with a rounded bezel: through its flat middle the wallpaper is barely disturbed, while the bezel bends it hard, the way a lens's edge does, splitting it into faint color fringes. A specular line runs along the edge facing the light and a fainter one along the opposite edge; the body is lightly frosted and lifted toward a pale tint, and casts a soft shadow. The shapes drift, meet and flow together like drops of liquid, and a drop follows the cursor and merges with them.

## Choose it for

Open an app landing, a design-tool homepage or a product launch with the glass look visitors now know from their own devices, beside the copy rather than under it: the composition sits to one side and your image can lie behind it.

## Limits

Liquid Glass bends what it draws itself, its ribbon wallpaper or one image or video you give it; it cannot refract the live HTML of your page, because no web API lets a shader read the page's pixels. Its shapes are a composition you can move and size, not your own interface elements.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/liquid-glass/edit?look=default&scene=landing)

## Landing scene

This preview uses `position`: [0.68,0.5], `size`: 0.85. The editor link carries these settings with your Look, except the placement: the editor keeps the shader centred. Direct editor visits use the product defaults; Reset all restores those defaults.

## Install

Install editable source with the CLI; it installs shared dependencies automatically. Free needs no login. ZIP Export Kits are also available.

```sh
npx @aperveil/cli add shader liquid-glass --framework react
```

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

```tsx
"use client";

import LiquidGlass from "./components/aperveil/liquid-glass/LiquidGlass";

export default function Hero() {
  return (
    <LiquidGlass
      className="hero-shader"
      src="/videos/your-clip.mp4" size={1} colorA="#0a2fd9"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }
```

Component props: `colorA`, `colorB`, `colorC`, `colorD`, `tintColor`, `position`, `size`, `bezel`, `thickness`, `dispersion`, `frost`, `translucency`, `specular`, `shadow`, `merge`, `flowSpeed`, `drift`, `interaction`, `opacity`, `src`, `mediaFocus`, `mediaKind`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

### Vue and Nuxt

```sh
npx @aperveil/cli add shader liquid-glass --framework vue
```

```vue
<script setup lang="ts">
import LiquidGlass from "./components/aperveil/liquid-glass/vue/LiquidGlass.vue";
</script>

<template>
  <LiquidGlass class="hero-shader" src="/videos/your-clip.mp4" :size="1" color-a="#0a2fd9">
    <template #fallback><div class="hero-shader-fallback" /></template>
  </LiquidGlass>
</template>

<!-- .hero-shader { width: 100%; height: 560px; } -->
```

Vue 3.5 or newer, Nuxt included: it renders an empty canvas on the server and starts in the browser, so it needs no <ClientOnly>. Same props as the React component.

### Plain HTML

```html
<script type="module" src="./aperveil-liquid-glass.js"></script>

<aperveil-liquid-glass class="hero-shader" src="/videos/your-clip.mp4" size="1" color-a="#0a2fd9">
  <div slot="fallback" class="hero-shader-fallback"></div>
</aperveil-liquid-glass>

<style>
  .hero-shader { display: block; width: 100%; height: 560px; }
</style>
```

No install and no build step: keep the two files of the kit's html folder together.

### WordPress

Download `aperveil-shader-liquid-glass.zip` from the editor (Install, then WordPress) and upload it under Plugins, Add New, Upload Plugin. WordPress 6.5 or newer: a plugin with a block that holds your own content in front of the shader, and a shortcode for page builders. In the block editor, add the "Liquid Glass" block (Design) and place your blocks inside it; in a page builder, use the shortcode:

```html
[aperveil_liquid_glass height="560px" overlay="20" src="https://example.com/your-clip.mp4"]
  <h2>Your headline</h2>
  <p>Your text, in front of the shader.</p>
[/aperveil_liquid_glass]
```

### Framer

Copy `LiquidGlass.tsx` from the editor (Install, then Framer); it opens on the values you chose. In Framer, add a new code file (Assets, Code), replace its sample code with the copy, then drag Liquid Glass onto the canvas: its Color Looks and every control are in the property panel. [Framer guide](https://www.aperveil.com/docs/framer).

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Deep (`colorA`, color): The wallpaper's deepest color, behind everything.
- Ribbon (`colorB`, color): The body of the ribbons.
- Light (`colorC`, color): The lit crest of each ribbon.
- Accent (`colorD`, color): The wallpaper's second ground, toward the lower corner.
- Glass tint (`tintColor`, color): The pale color the glass lifts what it shows toward.
- Position (`position`, xy): Where the glass sits in the frame.
- Size (`size`, slider): Size of the glass shapes.
- Bezel (`bezel`, slider): Width of the rounded edge that bends the light.
- Thickness (`thickness`, slider): How far the glass bends what lies behind it.
- Dispersion (`dispersion`, slider): Color fringes along the bezel, as glass splits light.
- Frost (`frost`, slider): Blur inside the glass.
- Translucency (`translucency`, slider): How far the glass lifts what it shows toward its tint.
- Specular (`specular`, slider): The light along the edges.
- Shadow (`shadow`, slider): The soft shadow the glass casts.
- Liquid (`merge`, slider): How readily touching shapes flow into one.
- Speed (`flowSpeed`, slider): Speed of the ribbons and the drifting glass.
- Drift (`drift`, slider): How far the shapes wander, meeting and parting.
- Cursor drop (`interaction`, slider): Size of the drop that follows the cursor and merges with the glass. Zero turns it off.
- Opacity (`opacity`, slider): Opacity of the whole effect over the page.

## Compatibility

WebGPU rendering requires a supported browser and secure context: Chrome and Edge (Windows, macOS and ChromeOS; Chrome on Android 12 or newer), Safari 26 (Mac, iPhone and iPad) and Firefox (Windows (from 141) and Apple silicon Macs (from 145)). Firefox on Linux, Android and Intel Macs is still rolling it out (checked October 2026). The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout.

## Performance

2.294 ms GPU timestamp median; p95 3.146 ms. 1440x900 @ dpr 1.5; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-22. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Does it work in Safari?

Yes. It renders in WebGPU, which Safari 26 supports, so the refraction is real there too. CSS and SVG liquid glass relies on SVG displacement filters that Safari and Firefox do not apply to what lies behind an element.

### Can I use my own image behind the glass?

Yes. Choose an image or video in the editor, or pass one to the component: the glass lenses it at the bezel, frosts it through the body and casts its shadow on it.

### What do the controls correspond to?

Specular, Frost, Translucency and Shadow follow the controls Apple's Icon Composer gives Liquid Glass. Bezel, Thickness and Dispersion set how strongly the edge bends light, and Liquid how readily touching shapes flow into one.

### What happens without WebGPU?

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

### Can I use this shader commercially?

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects.

## License

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects.

## Related shaders

- [Liquid Orb](https://www.aperveil.com/shaders/liquid-orb)
- [Glass Morph](https://www.aperveil.com/shaders/glass-morph)
- [Frost Glass](https://www.aperveil.com/shaders/frost-glass)