* { box-sizing: border-box; }
body {
font-family: system-ui, "Segoe UI", sans-serif;
background: #111;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.glow-card {
position: relative;
width: 300px;
border-radius: 20px;
/* The Gradient Background */
background: linear-gradient(135deg, #FF6B6B 0%, #556270 100%);
z-index: 1;
}
/* The Glowing Shadow */
.glow-card::after {
content: "";
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 100%;
background: inherit; /* Inherit the gradient */
border-radius: 20px;
filter: blur(25px);
opacity: 0.6;
z-index: -1;
transition: opacity 0.3s;
}
.glow-card:hover::after {
opacity: 0.8;
}
.card-content {
background: rgba(255, 255, 255, 0.95);
padding: 30px;
border-radius: 18px;
margin: 2px; /* Slight offset to show border effect if desired */
height: calc(100% - 4px);
text-align: center;
}
h2 { margin: 0 0 8px; color: #111; }
p { margin: 0; color: #666; }
