Glass Card

A premium frosted glass effect using native backdrop-filter. Blends seamlessly with complex backgrounds.

Premium Feel

This card uses backdrop-filter to create a beautiful frosted glass effect that adapts to its background.

Installation

1. Add the CSS variables to your global stylesheet:

css
/* Glassmorphism Variables */
:root {
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(226, 232, 240, 0.8);
}

[data-theme='dark'] {
  --glass-bg: rgba(30, 41, 59, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
}

2. Copy the React component into your project:

tsx
"use client";

import { ReactNode } from "react";

interface GlassCardProps {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

/**
 * A premium card component with a frosted glass effect.
 * Uses CSS backdrop-filter for the glass effect.
 */
export const GlassCard = ({ children, className = "", style }: GlassCardProps) => {
  return (
    <div
      className={`glass-card ${className}`}
      style={{
        background: "var(--glass-bg)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        border: "1px solid var(--glass-border)",
        borderRadius: "1rem",
        padding: "1.5rem",
        boxShadow: "0 8px 32px 0 rgba(0, 0, 0, 0.1)",
        transition:
          "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
        willChange: "transform, backdrop-filter",
        transform: "translateZ(0)", // Force GPU layer
        ...style
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = "translateY(-4px)";
        e.currentTarget.style.boxShadow = "0 12px 40px 0 rgba(0, 0, 0, 0.15)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = "translateY(0)";
        e.currentTarget.style.boxShadow = "0 8px 32px 0 rgba(0, 0, 0, 0.1)";
      }}
    >
      {children}
    </div>
  );
};

Usage

tsx
import { GlassCard } from '@/components/ui/glass-card';

export default function MyComponent() {
  return (
    <div className="bg-gradient-to-r from-blue-500 to-purple-500 p-8">
      <GlassCard>
        <h3>Frosted Glass</h3>
        <p>Beautiful backdrop blur effect.</p>
      </GlassCard>
    </div>
  );
}