Liquid Glass Component

A CSS-only liquid glass effect that creates a beautiful frosted glass appearance.

Implementation

export function LiquidGlass({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative overflow-hidden rounded-2xl">
      {/* Glass layer */}
      <div className="absolute inset-0 bg-white/10 backdrop-blur-md" />
      
      {/* Highlight */}
      <div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent" />
      
      {/* Border */}
      <div className="absolute inset-0 rounded-2xl border border-white/20" />
      
      {/* Content */}
      <div className="relative z-10 p-6">
        {children}
      </div>
    </div>
  )
}

Usage

<LiquidGlass>
  <h2>Glass Card Content</h2>
  <p>This appears inside the glass effect</p>
</LiquidGlass>

CSS Only Version

.liquid-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  border-radius: 16px;
  pointer-events: none;
}