# Card Glass Frost — React Card Component

> A frosted glass card with a lit top edge and fine grain, floating over slowly drifting colour blobs.

- Category: [Cards](https://pixelpapa.com/components/cards.md)
- Tags: card, glass, blur, frosted, gradient
- Dependencies: lucide-react (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/cards/card-glass-frost

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/card-glass-frost.json"
```

The file is written to `components/pixelpapa/card-glass-frost.tsx`. To install manually, run `npm install lucide-react` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { Cloud, CloudDrizzle, CloudSun, MoonStar, Sun, Wind } from "lucide-react";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

export function GlassCard({ className, children, ...props }: ComponentProps<"div">) {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-3xl border border-white/25 bg-white/[0.12] text-white shadow-[0_18px_50px_-12px_rgb(0_0_0/0.45),inset_0_1px_0_rgb(255_255_255/0.4)] backdrop-blur-2xl backdrop-saturate-150",
        className,
      )}
      {...props}
    >
      {/* Sheen + grain: the two details that make blur read as glass. */}
      <div aria-hidden className="pointer-events-none absolute inset-0 bg-linear-to-br from-white/25 via-transparent to-transparent" />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-[0.18] mix-blend-overlay"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
        }}
      />
      <div className="relative">{children}</div>
    </div>
  );
}

const blobs = [
  { c: "oklch(0.72 0.21 350)", pos: "left-[4%] top-[8%] size-56", d: 0 },
  { c: "oklch(0.78 0.16 75)", pos: "right-[6%] top-[-12%] size-64", d: -5 },
  { c: "oklch(0.7 0.17 215)", pos: "right-[18%] bottom-[-18%] size-72", d: -9 },
  { c: "oklch(0.62 0.24 295)", pos: "left-[22%] bottom-[-10%] size-52", d: -13 },
];

const hours = [
  { t: "Now", icon: Sun, v: "24°" },
  { t: "15:00", icon: CloudSun, v: "25°" },
  { t: "18:00", icon: Cloud, v: "22°" },
  { t: "21:00", icon: CloudDrizzle, v: "19°" },
  { t: "00:00", icon: MoonStar, v: "17°" },
];

export default function CardGlassFrostDemo() {
  return (
    <div className="relative flex h-[420px] w-full max-w-2xl items-center justify-center overflow-hidden rounded-[2rem] bg-[oklch(0.24_0.09_280)]">
      <style>{`
        @keyframes pp-card-glass-frost-drift {
          0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
          33% { transform: translate3d(34px, -22px, 0) scale(1.12); }
          66% { transform: translate3d(-26px, 26px, 0) scale(0.92); }
        }
      `}</style>
      {blobs.map((b, i) => (
        <div
          key={i}
          aria-hidden
          className={cn("absolute rounded-full motion-reduce:animate-none", b.pos)}
          style={{ background: b.c, animation: `pp-card-glass-frost-drift 16s ease-in-out ${b.d}s infinite` }}
        />
      ))}

      <GlassCard className="w-[340px] p-6">
        <div className="flex items-start justify-between">
          <div>
            <p className="text-sm text-white/75">Lisbon, Alfama</p>
            <p className="mt-1 text-7xl leading-none font-light tracking-tighter">24°</p>
          </div>
          <Sun className="size-12 text-[oklch(0.9_0.15_95)] drop-shadow-[0_0_18px_oklch(0.9_0.15_95/0.7)]" strokeWidth={1.5} />
        </div>
        <p className="mt-3 text-sm text-white/80">Sunny spells · H 27° L 17°</p>
        <div className="mt-5 grid grid-cols-5 gap-1 rounded-2xl bg-black/15 p-2 ring-1 ring-white/10 ring-inset">
          {hours.map(({ t, icon: Icon, v }, i) => (
            <div key={t} className={cn("flex flex-col items-center gap-1.5 rounded-xl py-2 text-xs", i === 0 && "bg-white/20")}>
              <span className="text-white/70">{t}</span>
              <Icon className="size-4" />
              <span className="font-medium tabular-nums">{v}</span>
            </div>
          ))}
        </div>
      </GlassCard>

      <GlassCard className="absolute right-8 bottom-9 hidden rounded-2xl px-4 py-3 sm:block">
        <div className="flex items-center gap-3">
          <Wind className="size-4 text-white/80" />
          <div className="text-xs">
            <p className="font-medium">12 km/h NW</p>
            <p className="text-white/65">Air quality 32 · Good</p>
          </div>
        </div>
      </GlassCard>
    </div>
  );
}
```

## AI prompt

```text
Add the "Card Glass Frost" component from PixelPapa UI to this project.

What it is: A frosted glass card with a lit top edge and fine grain, floating over slowly drifting colour blobs.
Category: Cards. Depends on: lucide-react.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/card-glass-frost.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/card-glass-frost.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/card-glass-frost" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More cards

- [Card 3D Tilt](https://pixelpapa.com/components/cards/card-3d-tilt.md) (Pro): A card that leans toward the pointer on springs, with a glare that tracks the cursor and layers floating at different depths.
- [Card Border Beam](https://pixelpapa.com/components/cards/card-border-beam.md) (Pro): A card with a comet of light travelling around its border, drawn with an animated conic gradient and a soft glow copy.
- [Card Expandable Detail](https://pixelpapa.com/components/cards/card-expandable-detail.md) (Pro): Compact rows that expand in place with a shared layout animation, pushing their neighbours aside on a spring.
- [Card Flip](https://pixelpapa.com/components/cards/card-flip.md) (Pro): A two-sided card that turns over on a spring when clicked or activated from the keyboard, on either axis.
- [Card Hover Reveal Actions](https://pixelpapa.com/components/cards/card-hover-reveal-actions.md) (Pro): A media card whose artwork zooms on hover while quick actions spring in from the edge and a call to action rises from the footer.
- [Card Notification Stack](https://pixelpapa.com/components/cards/card-notification-stack.md): A loose pile of notifications that straightens and fans out from its centre into a readable list on hover or focus.