Glassmorphism Playground.
Design frosted glass effects with live preview. Tune blur, depth, and glow — export CSS or Tailwind instantly.
Private · Client-side only·No data leaves your browser
Live preview
Frosted glass on your backdrop
Blur
16px
Fill opacity
15%
Saturation
180%
Radius
16px
CSS
Drop into your stylesheet
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow:
0 5px 20px rgba(0, 0, 0, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.40),
inset 0 -1px 0 rgba(255, 255, 255, 0.10);
position: relative;
overflow: hidden;
}
.glass::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.60),
transparent
);
}
What is glassmorphism?
Tune backdrop blur, tint, border, and inner glow with a live preview on card, navbar, and modal layouts. Export CSS or Tailwind snippets.
Frequently asked questions
What can I export?+
Copy production-ready CSS with backdrop-filter, border, and inset glow — or a Tailwind className starting point.
Does share link work?+
Yes — blur, opacity, tint, background mode, and preview card type are encoded in ?s= via useClientScenarioSync.