css
UI
Glassmorphism Card Component
Modern glassmorphism card design with backdrop blur, gradient borders, hover animations, and responsive layout.
Apex Logic
0 copies
css
/* Glassmorphism Card Component */
.glass-card {
position: relative;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 32px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Gradient border effect */
.glass-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
padding: 1px;
background: linear-gradient(
135deg,
rgba(0, 225, 255, 0.3),
transparent 40%,
transparent 60%,
rgba(167, 139, 250, 0.3)
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
}
.glass-card:hover::before { opacity: 1; }
.glass-card:hover {
transform: translateY(-8px);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 225, 255, 0.05);
}
/* Inner glow effect */
.glass-card::after {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(
circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(0, 225, 255, 0.06) 0%,
transparent 50%
);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.glass-card:hover::after { opacity: 1; }
/* Responsive grid layout */
.glass-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
padding: 20px 0;
}
@media (max-width: 640px) {
.glass-grid { grid-template-columns: 1fr; }
.glass-card { padding: 24px; border-radius: 16px; }
}