Glassmorphism

Generate frosted glass effects instantly.

Glass Card

This effect uses backdrop-filter to blur the background behind the element, creating a sense of depth.

Properties

Tint

Blur16px

Transparency0.6

Saturation180%

Border Radius12px

Border Opacity0.3

CSS Output

background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.3);

What is Glassmorphism?

The Effect

Glassmorphism is a UI trend that emphasizes light and dark objects placed on top of colorful backgrounds. It is achieved by using a background blur effect which creates a "frosted glass" look.

Key Properties

Backdrop-filter: The core CSS property that blurs the area behind the element.
Transparency: Using RGBA colors with low alpha to let the background show through.
Subtle Border: A semi-transparent white border mimics the edge of glass.