✨ Creating a Stunning Glassmorphic Parallax Card with Pure CSS

#css

Glassmorphism is one of the most captivating trends in modern UI design — blending blurred backgrounds, transparency, and soft lighting to give elements a "frosted glass" look.

In this article, we’ll build a pure CSS glass card with:

a floating parallax effect,

interactive ripple on hover,

a glowing radial pattern,

smooth entry animation.

And all that — without a single line of JavaScript.

Final Result
This is what we’ll be building:

https://codepen.io/andysay1/pen/bNNZQMB

body {
  margin: 0;
  height: 100vh;
  display: flex;
  background: radial-gradient(ellipse at top left, #0f172a, #000);
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  perspective: 1000px;
}

.parallax-glass {
  position: relative;
  width: 300px;
  height: 180px;
  padding: 2em;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.05),
    inset 0 0 20px rgba(255, 255, 255, 0.05),
    inset 0 0 60px rgba(0, 255, 255, 0.03);
  overflow: hidden;
  transform-style: preserve-3d;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.98);
  animation: fadeIn 0.8s ease-out forwards, float 12s ease-in-out infinite;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.parallax-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(
    circle at center,
    rgba(255,255,255,0.08) 0px,
    transparent 15px,
    rgba(255,255,255,0.05) 30px
  );
  animation: ripple 4s infinite linear;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.parallax-glass::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.parallax-glass:hover::after {
  animation: rippleSpread 1s ease-out forwards;
}

@keyframes rippleSpread {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.5;
  }
  70% {
    transform: translate(-50%, -50%) scale(12);
    opacity: 0.15;
  }
  100% {
    transform: translate(-50%, -50%) scale(15);
    opacity: 0;
  }
}

.parallax-glass span {
  position: relative;
  z-index: 2;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 4px rgba(255,255,255,0.1);
}

@keyframes ripple {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 300% 300%;
  }
}

@keyframes float {
  0%, 100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(3deg) rotateY(-3deg);
  }
}

🧠 Takeaways
This is a great example of how far CSS has come — combining motion, depth, and interactivity without JavaScript.

Use this glass block as a UI card, login box, notification, or hero element in your next project.

If you enjoyed this, leave a ❤️ and share your remix!