CSS
Glassmorphism in Pure CSS
Build stunning glass cards from scratch using only backdrop-filter and rgba backgrounds.
Read guide →Build frosted glass CSS effects with live preview.
.glass-card {
background: rgba(255, 255, 255, 0.22);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.60);
box-shadow: 0 6px 32px rgba(0,0,0,0.37);
}Glassmorphism is a UI design trend that mimics the appearance of frosted glass. Elements appear translucent with a blurred backdrop, creating a sense of depth and layering in flat interfaces.
Popularized by Apple's macOS Big Sur in 2020 and embraced across iOS, Windows 11, and modern web design, it relies on CSS backdrop-filter: blur() to achieve a real-time blur of whatever is rendered behind an element.
The technique creates visual hierarchy that feels both modern and tactile — drawing attention to content while maintaining spatial awareness of the layers beneath.
backdrop-filter property blurs everything rendered behind the element, not the element itself.Step-by-step guides to implement glassmorphism in your projects.
Build stunning glass cards from scratch using only backdrop-filter and rgba backgrounds.
Read guide →Create reusable glassmorphism components with Tailwind CSS and React hooks.
Read guide →Design pixel-perfect frosted glass effects in Figma using blur and fill opacity layers.
Read guide →