Design frosted-glass UI cards with a live preview. Dial in the blur, transparency, border and shadow — then copy the production-ready CSS for your project.
This is a glassmorphism UI element. Adjust the controls to style it to your design.
Browser support: backdrop-filter is supported in Chrome 76+, Edge 79+, Safari 9+, and Firefox 103+. Add -webkit-backdrop-filter (included in generated CSS) for Safari compatibility.
Glassmorphism uses backdrop-filter: blur() to blur whatever is behind a semi-transparent element, creating the look of frosted glass.
The glass "color" is controlled by a low-opacity background. White glass on vibrant backgrounds is the most popular combination.
A subtle semi-transparent border on the top and left edges mimics the way real glass catches light, adding depth without shadows.
It works in Chrome 76+, Edge 79+, Safari 9+ (with -webkit- prefix) and Firefox 103+. For older browsers you can fall back to a higher-opacity background. The generated CSS includes both prefixed and unprefixed versions.
Glassmorphism only works when there is something colorful or varied behind the element. A solid-color background will show no blur effect — use a gradient, image or layered content behind the glass card.
Copy the generated CSS and apply it to your element's class. Make sure any parent container doesn't clip or hide overflow, as that can prevent the blur from rendering.
A blur between 8px and 20px works for most designs. Below 6px the frosted-glass look disappears; above 30px the UI can feel heavy and the blur becomes a performance concern on mobile.