Назад в магазин
Glass Card
Карточка в стиле глассморфизм
Карточкиcardglassglassmorphismblur
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> ); }
Похожие компоненты
Spotlight
A soft light follows your cursor across the card.
Spotlight Card
Карточки · Карточка с прожектором, следующим за курсором
3D Tilt
The card leans toward your cursor in perspective.
3D Tilt Card
Карточки · Карточка с 3D-наклоном к курсору
Gradient border
A gold beam circles the edge — pure CSS, one conic gradient.
Gradient Border Card
Карточки · Карточка с золотым лучом по краю

