Component

Liquid Glass

A glass morphism surface that wraps any content — text, images, buttons — and makes it look like it's sitting behind real glass. Tune the warp, blur, tint, and rounding via props to match your design without touching the source.

Features

  • ▸Realistic Glass Surface: Wraps any content in a surface that looks and feels like physical glass — warped edges, soft blur, and ambient tint all included out of the box.
  • ▸Instant Customization: Dial in the exact look you want — adjust warp intensity, blur depth, corner rounding, and tint color without touching the source.
  • ▸Polished by Default: Ships with a built-in edge highlight and drop shadow so it looks great immediately, with props to strip either back for a flatter style.
  • ▸Use as Many as You Like: Stack multiple glass cards on the same page — each instance is fully isolated and never bleeds into another.
  • ▸Wrap Anything: Accepts any children — text, images, buttons, forms — and frames them in glass without affecting layout or click interactions.
Glass morphism

Liquid Glass

Now playing

Midnight City

M83 · Hurry Up, We're Dreaming

72°

Partly cloudy

San Francisco

Notifications

New comment on your post

2m ago

Maya liked your design

9m ago

Deploy succeeded ✓

1h ago

Source Code
'use client';
import * as React from 'react';

export default function LiquidGlass({
  className,
  children,
  style,
  displacement = 70,
  tint = 'rgba(255,255,255,0.06)',
  radius = 28,
  blur = 8,
  saturation = 180,
  noSpecular = false,
  noShadow = false,
  onClick,
}) {
  const id = React.useId().replace(/:/g, '');

  const shadowParts = [
    !noSpecular && 'inset 0 1px 0 rgba(255,255,255,0.45)',
    !noSpecular && 'inset 0 -1px 0 rgba(255,255,255,0.08)',
    !noShadow   && '0 8px 30px rgba(0,0,0,0.35)',
  ].filter(Boolean).join(', ');

  return (
    <div
      className={['relative isolate', onClick && 'cursor-pointer', className].filter(Boolean).join(' ')}
      style={{ borderRadius: radius, ...style }}
      onClick={onClick}
    >
      <svg className="absolute -z-10 h-0 w-0" aria-hidden>
        <defs>
          <filter id={`lg-${id}`} x="0%" y="0%" width="100%" height="100%">
            <feTurbulence type="fractalNoise" baseFrequency="0.012 0.018" numOctaves="2" seed="7" result="noise" />
            <feGaussianBlur in="noise" stdDeviation="2" result="softNoise" />
            <feDisplacementMap in="SourceGraphic" in2="softNoise" scale={displacement} xChannelSelector="R" yChannelSelector="G" />
          </filter>
        </defs>
      </svg>

      <div
        className="absolute inset-0 overflow-hidden"
        style={{
          borderRadius: radius,
          backdropFilter: `blur(${blur}px) saturate(${saturation}%) url(#lg-${id})`,
          WebkitBackdropFilter: `blur(${blur}px) saturate(${saturation}%)`,
          background: tint,
        }}
      />

      {(!noSpecular || !noShadow) && (
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            borderRadius: radius,
            boxShadow: shadowParts || undefined,
            background: !noSpecular
              ? 'linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.10) 100%)'
              : undefined,
          }}
        />
      )}

      <div className="relative h-full" style={{ borderRadius: radius }}>
        {children}
      </div>
    </div>
  );
}
sparkui