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.
Glassmorphism is built from three properties working together. backdrop-filter: blur() blurs whatever is behind the element, a semi-transparent background gives it a tint, and a subtle light border suggests the edge of a pane catching light.
The border is the detail most often omitted and the one that does the most work. A one-pixel border in white at 10 to 20 percent opacity reads as the refractive edge of glass, and without it the element looks like a blurred rectangle rather than a surface. A soft shadow beneath adds the separation that makes it read as floating.
The blur radius carries the material's character: 8 to 12 pixels reads as thin glass, while 20 or more reads as frosted. Background opacity between about 10 and 25 percent is the useful range — beyond that the blur is wasted because too little shows through.
The effect depends entirely on there being something interesting behind it. Over a flat colour, blurring produces the same flat colour and the element simply looks semi-transparent — all the cost, none of the effect. Glassmorphism needs a photograph, a gradient, or overlapping shapes underneath.
This is a real design constraint rather than a detail, and it is why the style appears mostly on marketing pages and media-rich interfaces rather than in dense productivity software. It also means the effect changes as content scrolls behind it, which can be attractive or distracting depending on the content.
Contrast is the hard problem. Text on a glass panel sits over whatever happens to be behind it, so contrast varies with the background and can fail badly in places even where it passes in the screenshot the design was approved from. The reliable solutions are to keep background opacity high enough to guarantee a floor, to add a subtle gradient scrim behind the text, or to restrict glass panels to areas where the underlying imagery is controlled. Check the worst case with the contrast checker, not the best.
backdrop-filter is genuinely expensive. It forces the browser to sample and blur the composited content behind the element, and that has to be redone whenever anything behind it changes — including during scroll. Several large glass panels on one page, or a glass header over scrolling content, can produce visible frame drops on mid-range devices.
Mitigations: keep the blurred areas small, avoid animating anything behind a glass element, and be cautious about a fixed glass header, which is the most expensive common pattern because the content behind it changes continuously. Test on a mid-range phone rather than a development machine, where the cost is invisible.
Support is now broad — Chrome, Edge, Safari and Firefox all implement it, with Safari historically requiring the -webkit- prefix. Provide a fallback regardless, using @supports not (backdrop-filter: blur(1px)) to set a more opaque solid background, since the unblurred fallback of a 15 percent transparent panel is usually unreadable.
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.
There is probably a flat colour behind it. Blurring a solid colour produces the same solid colour — the effect needs a photograph, gradient or overlapping shapes underneath to be visible.
It is one of the more expensive CSS properties, since the browser must sample and blur composited content behind the element on every change. A fixed glass header over scrolling content is the costliest common pattern. Keep blurred areas small and test on a mid-range phone.