Glassmorphism Card
Frosted glass effect using backdrop-filter blur with radial gradient background orbs and subtle white border.
Glassmorphism Card the 1st of 20 designs in the 20 CSS Cards with Animations collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="stage-1">
<div class="card-glass">
<h4>Glassmorphism</h4>
<p>Frosted glass with backdrop blur and layered gradient glows.</p>
<button class="glass-btn">Learn more</button>
</div>
</div> .card-glass {
width: 200px;
padding: 20px 22px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
transition:
transform 0.3s,
box-shadow 0.3s;
}
.card-glass:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
.card-glass h4 {
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 6px;
}
.card-glass p {
font-size: 11px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.5;
margin-bottom: 14px;
}
.glass-btn {
font-size: 11px;
padding: 5px 14px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: background 0.2s;
}
.card-glass:hover .glass-btn {
background: rgba(255, 255, 255, 0.32);
}
/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
width: 100%;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 2.5rem 1.5rem;
box-sizing: border-box;
}
.stage-1 {
background: linear-gradient(135deg, #1a0533 0%, #0a1a3a 50%, #0d2b1a 100%);
overflow: hidden;
}
.stage-1::before {
content: "";
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(124, 108, 255, 0.4);
top: -30px;
right: -20px;
filter: blur(40px);
}
.stage-1::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(61, 232, 245, 0.35);
bottom: -10px;
left: 10px;
filter: blur(30px);
}