Glass

Frosted glass panel with SVG feDisplacementMap lens refraction and WebGL fallback.

Preview

SVG feDisplacementMap lens refraction — the rim bends real DOM pixels. Text stays sharp and selectable.

Install

npx shadcn@latest add https://websiteglass.com/r/glass.json

Usage

import { Glass } from '@/components/ui/glass';

export default function Example() {
  return (
    <div className="relative h-64 w-full bg-gradient-to-br from-indigo-500 to-purple-600">
      <Glass
        className="absolute inset-4 rounded-2xl"
        contentClassName="p-6"
        intensity={0.6}
        blur={20}
      >
        <p className="text-white">Content sits above the glass layer.</p>
      </Glass>
    </div>
  );
}

Props

Prop	Type	Default	Description
`intensity`	`number`	`0.5`	Refraction + highlight strength (0–1). Controls displacement scale and tint opacity.
`blur`	`number`	`20`	Backdrop blur in px.
`bgOpacity`	`number`	derived	Glass tint opacity (0–1). Defaults to a function of `intensity`.
`className`	`string`	—	Classes on the root element (controls size, rounding, positioning).
`contentClassName`	`string`	—	Classes on the inner content wrapper.
`as`	`keyof JSX.IntrinsicElements`	`"div"`	Root element tag — use `"section"`, `"article"`, etc. for semantics.
`children`	`ReactNode`	—	Content rendered above the glass layers.

How it works

The component stacks four layers bottom → top:

Backdrop + displacement — backdrop-filter: blur() combined with an SVG feDisplacementMap on the same element. The filter shifts background pixels using a canvas-generated annulus map, producing a real lens rim at the edges while keeping the center clear.
Tint + rim light — a gradient overlay using color-mix() against --color-card, plus inset box-shadow for the inner rim highlight.
Specular hotspot — a blurred radial gradient in the upper-left quadrant mimicking a real light reflection.
Content — sits in a relative wrapper, unaffected by filters; text stays sharp and fully selectable.

When SVGFEDisplacementMapElement is unavailable, a WebGL GLSL shader renders the rim and specular directly onto a canvas overlay.