MarovStudio
Bazara qayıt

Glass Card

Şüşə effektli (glassmorphism) kart

Kartlarcardglassglassmorphismblur
Tam ekran

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>
  );
}

Oxşar komponentlər

Spotlight

A soft light follows your cursor across the card.

Spotlight Card

Kartlar · Kursorun işığı ilə canlanan kart

3D Tilt

The card leans toward your cursor in perspective.

3D Tilt Card

Kartlar · Kursor istiqamətində 3D əyilən kart

Gradient border

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

Gradient Border Card

Kartlar · Kənarında qızıl şüa dövr edən kart