CSS glassmorphism generator
Adjust the blur, transparency, border, and shadow to create a frosted glass effect (glassmorphism), then copy the generated CSS. Live preview in your browser, no data sent to a server.
How it works
Glassmorphism combines three CSS properties: a semi-transparent background, a backdrop blur (backdrop-filter: blur()) that frosts what's behind the element, and a thin light border that simulates a reflection on the "glass" edge. Adjust the sliders to find the right balance between text legibility and visual effect, then copy the CSS to apply it to your cards, navigation bars, or modal windows.
Does glassmorphism work on all browsers?
The backdrop-filter property is supported by all modern browsers (Chrome, Firefox, Safari, Edge); the generated code includes the -webkit-backdrop-filter prefix for better Safari compatibility. On very old browsers, the element remains visible but without the blur effect.
On what type of background is this effect most visible?
Glassmorphism is most visible on a background with contrast or color (gradient, image, illustration) placed behind the element: on a plain, light background, the blur effect remains subtle. Always test the legibility of text placed on the glass element before using it in a real interface.
100% local generation and preview: the CSS is calculated in your browser from your settings, without any data being sent.