Glassmorphism Card

cardfrom Community Creative

Live

AI Usage Rules

Use GlassCard for feature cards on dark backgrounds. The glassmorphism effect (backdrop-blur + semi-transparent bg) works best over gradient or image backgrounds. Keep content concise. The hover effect includes a glowing orb animation.

Code Template

interface GlassCardProps extends React.ComponentProps<"div"> {
  title: string
  description: string
  icon?: React.ReactNode
}

export function GlassCard({ title, description, icon, className, children, ...props }: GlassCardProps) {
  return (
    <div className={`group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:bg-white/10 hover:shadow-[0_8px_32px_rgba(99,102,241,0.15)] ${className ?? ""}`} {...props}>
      <div className="absolute -top-24 -right-24 h-48 w-48 rounded-full bg-gradient-to-br from-indigo-500/20 to-purple-500/20 blur-3xl transition-all duration-500 group-hover:scale-150 group-hover:from-indigo-500/30 group-hover:to-purple-500/30" />
      <div className="relative z-10">
        {icon && <div className="mb-4 inline-flex rounded-xl bg-white/10 p-3">{icon}</div>}
        <h3 className="text-lg font-semibold text-white">{title}</h3>
        <p className="mt-2 text-sm leading-relaxed text-gray-400">{description}</p>
        {children}
      </div>
    </div>
  )
}

Props Schema

Property	Type	Default
icon	string	—
title	string	—
description	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "icon": {
      "type": "string"
    },
    "title": {
      "type": "string"
    },
    "description": {
      "type": "string"
    }
  }
}