A glassmorphism card built with pure HTML and CSS that uses transparency, blur, and soft borders to create a modern frosted-glass surface without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where modern visual depth and separation are needed, such as dashboards, profile cards, feature highlights, landing pages, or UI layouts using glassmorphism design.
Implementation
The glassmorphism effect is achieved using CSS backdrop-filter, semi-transparent backgrounds, and subtle borders, allowing content to remain readable while visually separating it from the background.
HTML
<div class="ss-card">
<h3>Glass Card</h3>
<p>Modern UI effect</p>
</div>CSS
.ss-card{
--bg: rgba(255,255,255,.55);
--text: #0f172a;
--border: rgba(255,255,255,.35);
padding:24px;
max-width:300px;
border-radius:16px;
background:var(--bg);
color:var(--text);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid var(--border);
box-shadow:0 20px 40px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark){
.ss-card{
--bg: rgba(20,20,20,.55);
--text: #e5e7eb;
--border: rgba(255,255,255,.08);
box-shadow:0 20px 40px rgba(0,0,0,.65);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses frosted glass / glassmorphism styling
- Enhances visual depth without heavy effects
- Lightweight and easy to theme
- Works in modern browsers
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.