✨ Creating a Stunning Glassmorphic Parallax Card with Pure CSS

[Lomanu4]

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:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

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!

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.