Glass Surface: Free React + Tailwind Component

A glassmorphic surface with live distortion, refraction, specular highlights, and pointer tilt.

An SVG displacement filter distorts the background in real time, with specular highlights and a dimensional edge layered on top, giving the refractive quality of Apple's "liquid glass".

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add glass-surface.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Corner radiusradius

Blur strengthblur

Saturationsaturation

1.7

Refraction distortiondistortion

Ripple frequencyfrequency

0.008

Interactive tiltinteractive

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<GlassSurface/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/glass-surface.en.json

Or, once registries are configured in components.json, install it as @webberui/glass-surface.

Usage

import { GlassSurface } from "@/components/ui/glass-surface";

<GlassSurface className="w-72">
  <p className="text-lg font-semibold text-white">Liquid Glass</p>
</GlassSurface>

Place the glass over a colored or patterned background so the refraction and saturation actually show. Control the size with className and the inner spacing with padding.

Props

Prop	Type	Default	Description
`radius`	`number`	`28`	Corner radius (px)
`blur`	`number`	`4`	Background blur strength (px)
`saturation`	`number`	`1.7`	Background saturation multiplier; `>1` makes the colors coming through more vivid
`distortion`	`number`	`36`	Refraction displacement (px), controlling how strongly the edge lenses
`frequency`	`number`	`0.008`	Refraction noise frequency; smaller values make larger, smoother ripples
`tint`	`string`	`rgba(255,255,255,0.12)`	Glass tint (a translucent overlay layer)
`interactive`	`boolean`	`true`	Pointer tilt, specular light tracking, and stronger distortion on hover (mouse only)
`padding`	`string`	`"p-6"`	Tailwind class for the inner spacing
`className`	`string`	—	Forwarded to the outer container (use it to set the size)

Accessibility

When the user has "reduce motion" enabled at the system level, the refraction distortion and pointer tilt are turned off and a static frosted glass remains
The refraction filter is applied through backdrop-filter's url(); browsers that do not support it fall back automatically to plain blur and saturation without breaking the layout
Every decorative layer is aria-hidden, so it does not affect how the content is announced

Glass Surface