New

GlassCard

Glassmorphism card with backdrop-blur, semi-transparent background, gradient border, and floating elements.

Creative & Uniqueglassglassmorphismblurtransparentcard

Dependencies

shadcn/ui components needed:

npx shadcn@latest add lucide-react

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Sparkles } from "lucide-react";
4
5export default function GlassCard() {
6  return (
7    <div className="relative flex items-center justify-center py-16">
8      {/* Background blobs */}
9      <div className="absolute left-1/4 top-1/4 h-64 w-64 rounded-full bg-violet-500 opacity-30 blur-3xl" />
10      <div className="absolute bottom-1/4 right-1/4 h-64 w-64 rounded-full bg-cyan-500 opacity-30 blur-3xl" />
11      <div className="absolute left-1/2 top-1/2 h-48 w-48 -translate-x-1/2 -translate-y-1/2 rounded-full bg-pink-500 opacity-20 blur-3xl" />
12
13      {/* Glass card */}
14      <div className="relative w-full max-w-sm overflow-hidden rounded-2xl border border-white/20 bg-white/10 p-8 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-white/5">
15        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/20 via-transparent to-white/5" />
16        <div className="relative z-10">
17          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-white/20 backdrop-blur-sm">
18            <Sparkles className="h-6 w-6 text-white" />
19          </div>
20          <h3 className="mb-2 text-xl font-bold text-white">Glassmorphism</h3>
21          <p className="mb-6 text-sm leading-relaxed text-white/70">
22            A beautiful frosted glass effect with backdrop blur, gradient borders, and layered transparency.
23          </p>
24          <div className="flex gap-3">
25            <button className="rounded-lg bg-white/20 px-4 py-2 text-sm font-semibold text-white backdrop-blur-sm transition-all hover:bg-white/30">
26              Explore
27            </button>
28            <button className="rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-white/80 transition-all hover:bg-white/10">
29              Learn more
30            </button>
31          </div>
32        </div>
33      </div>
34    </div>
35  );
36}