Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Build a frosted-glass card effect with backdrop blur.
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;Glassmorphism is a UI design trend where cards or panels appear as frosted, semi-transparent glass -- combining a translucent background, a backdrop blur of whatever's behind the element, and a subtle light border. This tool builds that combination with a live preview against a gradient background.
Adjust blur amount, background opacity, and border-radius. The preview card and generated CSS update instantly against a sample gradient backdrop.
backdrop-filter: blur(Npx); blurs whatever is visually behind the element (not the element itself), combined with a semi-transparent white background (rgba(255,255,255,opacity)) and a faint white border -- together producing the "frosted glass" look.
Pair with the CSS Gradient Generator for a colorful background the glass effect can show through.
With the starting values of blur 10, opacity 0.2 and radius 16, the output has five lines: a white background using rgba(255, 255, 255, 0.2), backdrop-filter: blur(10px), the same blur again as -webkit-backdrop-filter, a fixed border of 1px solid rgba(255, 255, 255, 0.3), and border-radius: 16px. The tint is always white and the border opacity is fixed at 0.3; only blur, background opacity and radius are adjustable. Blur and radius accept zero or higher, and opacity accepts 0 to 1 in steps of 0.05.
Suppose a hypothetical login card should sit on a photographic hero section. Start with blur 12, opacity 0.15 and radius 20. The card lets the photo show through but softened, so text is readable without hiding the picture. If the photo has bright areas and your text is white, the low opacity may not provide enough separation, so raise the opacity to about 0.25 or darken the text. If your text is dark and the photo is dark, do the opposite: consider a darker glass tint by replacing the white rgba values with a dark rgba color by hand.
Because the content behind a glass panel can change, for example as a user scrolls a page or as a photo loads, contrast can vary from moment to moment. Test with the brightest and darkest parts of the background. For browsers that do not support backdrop-filter, the panel just appears as a translucent white box, so provide enough background opacity that text stays legible even without the blur. Blur effects can also add rendering work, especially on large areas or many panels at once, so use them sparingly on low-powered devices.
It's supported in all modern major browsers, though older or less common browsers may not support it -- the included -webkit-backdrop-filter fallback improves Safari compatibility specifically.
backdrop-filter blurs whatever content is visually behind the element within the same stacking context -- if the element sits directly on a plain solid background with nothing else behind it, there's little visual difference from a plain semi-transparent background.
Low-contrast text over a busy blurred background can hurt readability -- ensure sufficient contrast between your text and the effective (blurred) background color, especially for body text rather than large decorative headings.
There may be nothing visually behind the element, or its background may be too opaque. Place the panel over an image or gradient and keep the opacity low.
Yes, but by editing the output: change the rgba background from white to a dark color. The tool itself always generates a white tint.
One is the standard property and the other is the prefixed version for Safari, which helps compatibility with browsers that need it.
Backdrop blur can be demanding on large elements or many overlapping panels. Keep panels small and few, and test on a modest device.
Reference: MDN Web Docs