Glass Card
Frosted-glass shell on a soft gradient backdrop — translucent surface, subtle inner highlight, backdrop-filter blur. Perfect over hero images.
Glass Card the 3rd of 19 designs in the 19 CSS Blockquote Designs 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="cbq-glass-bg">
<figure class="cbq-glass">
<blockquote>
<p>The best UI is the one you don't notice.</p>
</blockquote>
<figcaption>— Lena Park, Product Designer</figcaption>
</figure>
</div> .cbq-glass-bg {
padding: 28px;
border-radius: 14px;
background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 50%, #2eb88a 100%);
}
.cbq-glass {
max-width: 320px;
padding: 22px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
color: #fff;
font-family: system-ui, sans-serif;
}
.cbq-glass blockquote {
margin: 0;
}
.cbq-glass p {
margin: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
.cbq-glass figcaption {
margin-top: 12px;
font-size: 11px;
opacity: 0.85;
}