Glassmorphic Card

A card component with glassmorphic blur, shadows, and gradient border effects

Glassmorphic Card

The foundational card component used throughout the Bento UI Kit. Features backdrop blur, inset shadows, and gradient-masked borders for a modern glassmorphic aesthetic.

Usage

import {
  GlassmorphicCard,
  GlassmorphicCardContent,
  GlassmorphicCardHeader,
  GlassmorphicCardTitle,
  GlassmorphicCardDescription,
  GlassmorphicCardFooter,
} from "@/components/ui/glassmorphic-card";

export default function Example() {
  return (
    <GlassmorphicCard>
      <GlassmorphicCardContent>
        <GlassmorphicCardHeader>
          <GlassmorphicCardTitle>Card Title</GlassmorphicCardTitle>
          <GlassmorphicCardDescription>
            A beautiful glassmorphic card with blur effects.
          </GlassmorphicCardDescription>
        </GlassmorphicCardHeader>
        <GlassmorphicCardFooter>
          <button>Action</button>
        </GlassmorphicCardFooter>
      </GlassmorphicCardContent>
    </GlassmorphicCard>
  );
}

Components

GlassmorphicCard

The root container with glassmorphic overlay, blur, and shadow effects.

GlassmorphicCardOverlay

The background layer providing blur and inset shadow. Automatically included unless showOverlay={false}.

GlassmorphicCardContent

Content wrapper with proper z-index and padding.

GlassmorphicCardPreview

Area for visual content (images, illustrations) with optional border.

GlassmorphicCardHeader

Container for title and description with horizontal padding.

GlassmorphicCardTitle

Styled heading element (h3) for card titles.

GlassmorphicCardDescription

Styled paragraph for card descriptions.

GlassmorphicCardFooter

Footer area for actions, aligned to bottom.

Props

GlassmorphicCard Props

Prop	Type	Default	Description
variant	"default" | "bordered"	"default"	Card style variant
size	"default" | "square" | "horizontal" | "full"	"default"	Card width preset
blur	"none" | "sm" | "md" | "lg" | "xl"	"xl"	Backdrop blur intensity
showOverlay	boolean	true	Show glassmorphic overlay

GlassmorphicCardPreview Props

Prop	Type	Default	Description
bordered	boolean	false	Show gradient border
centered	boolean	false	Center content with max-width

Variants

Size Variants

// Default - 368px width
<GlassmorphicCard size="default">...</GlassmorphicCard>

// Square - 528px width
<GlassmorphicCard size="square">...</GlassmorphicCard>

// Horizontal - 700px width
<GlassmorphicCard size="horizontal">...</GlassmorphicCard>

// Full - 100% width
<GlassmorphicCard size="full">...</GlassmorphicCard>

Blur Variants

// No blur
<GlassmorphicCard blur="none">...</GlassmorphicCard>

// Small blur - 6px
<GlassmorphicCard blur="sm">...</GlassmorphicCard>

// Medium blur - 12px
<GlassmorphicCard blur="md">...</GlassmorphicCard>

// Large blur - 30px
<GlassmorphicCard blur="lg">...</GlassmorphicCard>

// Extra large blur - 50px (default)
<GlassmorphicCard blur="xl">...</GlassmorphicCard>

Style Variants

// Default - simple rounded corners
<GlassmorphicCard variant="default">...</GlassmorphicCard>

// Bordered - gradient-masked border
<GlassmorphicCard variant="bordered">...</GlassmorphicCard>

Examples

Complete Card

<GlassmorphicCard size="default" variant="bordered">
  <GlassmorphicCardPreview bordered centered>
    <img src="/preview.png" alt="Preview" />
  </GlassmorphicCardPreview>
  <GlassmorphicCardContent>
    <GlassmorphicCardHeader>
      <GlassmorphicCardTitle>Feature Title</GlassmorphicCardTitle>
      <GlassmorphicCardDescription>
        This is a complete example showing all card components.
      </GlassmorphicCardDescription>
    </GlassmorphicCardHeader>
    <GlassmorphicCardFooter>
      <GlowButton>Learn More</GlowButton>
    </GlassmorphicCardFooter>
  </GlassmorphicCardContent>
</GlassmorphicCard>

Without Overlay

<GlassmorphicCard showOverlay={false}>
  <div className="p-4">Custom content without overlay</div>
</GlassmorphicCard>

Horizontal Layout

<GlassmorphicCard size="horizontal">
  <div className="flex">
    <GlassmorphicCardPreview className="w-1/2" />
    <GlassmorphicCardContent className="w-1/2">
      <GlassmorphicCardHeader>
        <GlassmorphicCardTitle>Side by Side</GlassmorphicCardTitle>
      </GlassmorphicCardHeader>
    </GlassmorphicCardContent>
  </div>
</GlassmorphicCard>

Design Tokens

Dimensions

Token	Value	Description
Default width	368px	Standard card
Square width	528px	Square format
Horizontal width	700px	Wide format
Preview height	336px	Content preview area
Border radius	32px	Card corners

Effects

Token	Value	Description
--ui-surface-background	rgba(40, 40, 40, 0.7)	Overlay background
--shadow-4	inset 2px 4px 16px rgba(248,248,248,0.06)	Inset glow
--neutral-2-10	rgba(248, 248, 248, 0.1)	Border color
--blur-sm	6px	Small blur
--blur-xl	50px	Default blur

Responsive

All size variants collapse to w-full on mobile (max-md).

Found In

Universal - Used as the base wrapper for all 30 Bento card components.

Accessibility

• Semantic HTML structure with proper heading hierarchy
• All interactive elements remain focusable
• Overlay uses pointer-events-none on decorative elements