Glassmorphism Card

Classic glassmorphism card with backdrop-filter blur, saturation boost, semi-transparent tint, and subtle border. The most popular glass UI pattern for modern web design.

Preview

Loading preview…

Customize

Blur16

Saturate180

Opacity0.08

Radius16

"use client";

import styles from "./GlassCard.module.css";

type GlassCardProps = {
  blur?: number;
  saturate?: number;
  opacity?: number;
  radius?: number;
  className?: string;
};

export default function GlassCard({
  blur = 16,
  saturate = 180,
  opacity = 0.08,
  radius = 16,
  className,
}: GlassCardProps) {
  const cls = [styles.card, className].filter(Boolean).join(" ");

  return (
    <div
      className={cls}
      style={{
        borderRadius: radius,
        backdropFilter: `blur(${blur}px) saturate(${saturate}%)`,
        WebkitBackdropFilter: `blur(${blur}px) saturate(${saturate}%)`,
        backgroundColor: `rgba(255, 255, 255, ${opacity})`,
      }}
    />
  );
}