ZeroServer.tools

Glassmorphism CSS Generator

Design frosted-glass cards with backdrop-blur and copy the CSS.

Glassmorphism

Frosted glass card

Blur8px

Transparency0.15

Saturation120%

Border radius16px

Border opacity0.3

CSS

background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.3);

The glassmorphism effect

Glassmorphism is the frosted-glass look popularised by macOS and Windows — a translucent panel that blurs whatever sits behind it. The magic is backdrop-filter: blur(), combined with a semi-transparent background, a subtle light border, and a soft shadow for depth. Tune the sliders and copy the CSS. Remember to include the -webkit- prefix for Safari, and make sure there is something colourful behind the element or the blur has nothing to work with.

Pair it with the gradient generator for the backdrop, the box-shadow generator, or the filter generator.