# Glass Card

> Glassmorphism card with backdrop blur and a translucent border, made to sit over a colorful gradient.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/glass-card
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/glass-card.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

```bash
npm install lucide-react
```

## Usage

```tsx title="components/glass-card-demo.tsx"
import { CreditCard, Wifi } from "lucide-react"

import { GlassCard } from "@/components/glass-card"

export default function GlassCardDemo() {
  return (
    <div className="relative flex w-full flex-wrap items-center justify-center gap-6 overflow-hidden rounded-3xl bg-gradient-to-br from-fuchsia-500 via-violet-600 to-sky-500 p-8">
      <div className="pointer-events-none absolute -left-10 -top-10 size-56 rounded-full bg-amber-300/70 blur-3xl" aria-hidden />
      <div className="pointer-events-none absolute -bottom-12 right-0 size-64 rounded-full bg-emerald-300/60 blur-3xl" aria-hidden />

      <GlassCard
        className="relative"
        title="Welcome back"
        description="Your workspace is synced and ready."
        footer={
          <>
            <button
              type="button"
              className="inline-flex h-9 items-center rounded-lg bg-white px-4 text-sm font-medium text-neutral-900 outline-none transition-opacity hover:opacity-90 focus-visible:ring-4 focus-visible:ring-white/50"
            >
              Open dashboard
            </button>
            <span className="text-xs text-white/70">Last sync 2 min ago</span>
          </>
        }
      >
        <ul className="space-y-2 text-sm text-white/90">
          <li className="flex justify-between"><span>Projects</span><span className="font-medium">12</span></li>
          <li className="flex justify-between"><span>Open tasks</span><span className="font-medium">48</span></li>
        </ul>
      </GlassCard>

      <GlassCard className="relative aspect-[1.6] max-w-[17rem] p-5">
        <div className="flex h-full flex-col justify-between">
          <div className="flex items-center justify-between">
            <CreditCard className="size-6" aria-hidden />
            <Wifi className="size-5 rotate-90 opacity-80" aria-hidden />
          </div>
          <div>
            <p className="font-mono text-base tracking-widest">4242 4242 4242 4242</p>
            <p className="mt-1 text-xs text-white/80">ADA LOVELACE  ·  09/28</p>
          </div>
        </div>
      </GlassCard>
    </div>
  )
}
```

## Source

```tsx title="components/glass-card.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface GlassCardProps extends Omit<React.ComponentProps<"div">, "title"> {
  title?: React.ReactNode
  description?: React.ReactNode
  footer?: React.ReactNode
}

/**
 * Glassmorphism surface. It only looks like glass when placed over a colorful
 * or gradient backdrop, since it blurs whatever is behind it.
 */
export function GlassCard({
  title,
  description,
  footer,
  children,
  className,
  ...props
}: GlassCardProps) {
  return (
    <div
      className={cn(
        "relative w-full max-w-sm overflow-hidden rounded-3xl border border-white/30 p-6 text-white shadow-xl shadow-black/10 backdrop-blur-xl",
        "bg-gradient-to-br from-white/30 via-white/10 to-white/5 dark:border-white/15 dark:from-white/15 dark:via-white/5 dark:to-transparent",
        className
      )}
      {...props}
    >
      <div
        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/70 to-transparent"
        aria-hidden
      />
      {(title || description) && (
        <div className="space-y-1.5">
          {title && <h3 className="text-xl font-semibold tracking-tight">{title}</h3>}
          {description && <p className="text-sm text-white/80">{description}</p>}
        </div>
      )}
      {children && <div className={cn((title || description) && "mt-5")}>{children}</div>}
      {footer && <div className="mt-6 flex items-center gap-3 border-t border-white/20 pt-4">{footer}</div>}
    </div>
  )
}
```