←
Glass Surface Container

Glass Surface Container

Atmospheric Depth

Deep frosted glassmorphic card container with dynamic specular sheen, rounded corners, noise texture support, and ambient light reflection.

Interactive Playground & Studio

Live Controls
glass-surface.tsx
Glass Container Surface
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Frosted Glass Surfaceblur={20}
Glass Surface
Gaussian Blur 20px

Deep frosted glassmorphic card container with specular highlight rim and hardware blur.

Features & Physics

✓Gaussian blur backdrop filter
✓Dynamic specular border sheen
✓Hardware-accelerated rendering
✓High accessible contrast overlay

Code & Integration

Customized live with your active playground prop settings:

import GlassSurface from "@/components/GlassSurface";

export default function Example() {
  return (
    <GlassSurface width="100%" height="auto" borderRadius={24} blur={20} className="p-6">
      <p className="text-white">Content inside glass surface</p>
    </GlassSurface>
  );
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
borderRadiusnumber24Border radius in px.
blurnumber20Backdrop blur radius in px.