Glassmorphism Card

Modern frosted glass effect card design.

Creates a modern glassmorphism effect with frosted glass appearance, subtle borders, and depth.

glassmorphism.csscss

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 24px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(145deg, 
    rgba(255, 255, 255, 0.3), 
    rgba(255, 255, 255, 0.05));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

Usage

Apply .glass-card class to any container element.

Let’s Build Something You’ll Be Proud Of

No fluff. Just thoughtful design and reliable development.

Work with me

Average response time: within 24 hours