MarovStudio
Назад в магазин

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

Похожие компоненты