Liquid Glass Card

Cards

About

A draggable, glassmorphic card with a distorted backdrop blur, inset highlight, and soft glow, optionally expandable to a larger size on click.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Glass Card to your project and fits it to your theme.

Code

How Liquid Glass Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { LiquidGlassCard } from "@/components/ui/liquid-glass";

export default function LiquidGlassDemo() {
  return (
    <div className="relative flex h-screen w-full items-center justify-center overflow-hidden bg-[linear-gradient(135deg,#ff7a59_0%,#ff3d81_25%,#7b5cff_55%,#2fd6ff_100%)]">
      <div className="absolute -left-16 top-10 h-56 w-56 rounded-full bg-white/30 blur-2xl" />
      <div className="absolute bottom-10 right-10 h-72 w-72 rounded-full bg-black/20 blur-3xl" />
      <LiquidGlassCard
        width="260px"
        height="260px"
        className="flex items-center justify-center"
      >
        <p className="relative z-30 text-xl font-semibold text-white drop-shadow-sm">
          Liquid Glass
        </p>
      </LiquidGlassCard>
    </div>
  );
}