About Glassmorphism Generator
Glassmorphism is an interface style where a panel looks like frosted glass: semi-transparent, with the content behind it blurred. This generator outputs a translucent rgba() background, backdrop-filter: blur() with the -webkit- prefix for Safari, a slightly more opaque one-pixel border, and a border radius. The effect is only visible when something colorful sits behind the panel, and text on it still needs enough contrast.
Also known as: CSS Glassmorphism Generator.
How to use Glassmorphism Generator
- Fill in "Blur", "Background opacity", "Glass color" and "Radius".
- The result appears below and updates as you type.
- Copy the result with the copy button, or download it as a file where that is offered.
Questions about Glassmorphism Generator
Why does the blur not show up on my page?
The backdrop-filter property blurs what is behind the element, so the background must be at least partly transparent and there must be content behind it. Older browsers without backdrop-filter support show only the translucent color.
Runs in your browser. Page last updated .