MarovStudio
Back to marketplace

Glass Card

A frosted glassmorphism feature card

Cardscardglassglassmorphismblur
Fullscreen

Glass

Frosted surface over live color — reads in both themes.

import { Shield } from "lucide-react";

export function GlassCard() {
  return (
    <div className="relative w-72 overflow-hidden rounded-2xl p-6">
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10"
        style={{
          background:
            "radial-gradient(10rem circle at 20% 0%, rgba(245,158,11,0.35), transparent 60%), radial-gradient(9rem circle at 90% 100%, rgba(245,158,11,0.2), transparent 60%)",
        }}
      />
      <div className="rounded-xl border border-white/10 bg-white/[0.04] p-5 backdrop-blur-md">
        <Shield className="size-5 text-amber-400" />
        <h3 className="mt-3 text-sm font-semibold text-neutral-50">Glass</h3>
        <p className="mt-1 text-xs text-neutral-400">
          Frosted surface over live color.
        </p>
      </div>
    </div>
  );
}

Related components

Spotlight

A soft light follows your cursor across the card.

Spotlight Card

Cards · A card lit by a cursor-following spotlight

3D Tilt

The card leans toward your cursor in perspective.

3D Tilt Card

Cards · A card tilting in 3D toward the cursor

Gradient border

A gold beam circles the edge — pure CSS, one conic gradient.

Gradient Border Card

Cards · A card with a gold beam circling its edge