Tarjeta de vidrio

/**
 * Tarjeta de vidrio esmerilado con borde de luz y brillo superior.
 * Necesita un fondo con color o imagen detrás para que el desenfoque se note.
 *
 *   <div style={{ background: "linear-gradient(135deg, #3a1c8c, #0ea5e9)", padding: 40 }}>
 *     <GlassCard style={{ width: 320, height: 200 }}>Tu contenido</GlassCard>
 *   </div>
 */

import type { HTMLAttributes } from "react";

export type GlassCardProps = HTMLAttributes<HTMLDivElement> & {
  /** Qué tan opaco es el vidrio, de 0 a 1. */
  frost?: number;
};

const CSS = `
.gcv-card { position: relative; box-sizing: border-box; padding: 24px; overflow: hidden; border-radius: 24px; color: #fff; font-family: inherit; isolation: isolate;
  background: linear-gradient(140deg, rgba(255, 255, 255, calc(.26 * var(--gcv-frost, 1))), rgba(255, 255, 255, calc(.06 * var(--gcv-frost, 1))));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 30px 60px -18px rgba(20, 8, 70, .55), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .16); }
.gcv-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, transparent 38%), radial-gradient(90% 60% at 100% 100%, rgba(255, 255, 255, .12), transparent 70%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gcv-card { background: rgba(70, 40, 140, .72); } }
`;

export function GlassCard({ frost = 1, className, style, children, ...props }: GlassCardProps) {
  return (
    <>
      <style>{CSS}</style>
      <div {...props} className={["gcv-card", className].filter(Boolean).join(" ")} style={{ ["--gcv-frost" as string]: frost, ...style } as React.CSSProperties}>
        {children}
      </div>
    </>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/tarjeta-vidrio

import { GlassCard } from "./glass-card";

export default function Ejemplo() {
  return <GlassCard />;
}