Glassmorphism Generator

Generate the popular frosted glass effect using backdrop-filter and transparency.

#glassmorphism #glasseffect #frostedglass #backdropfilter

GLASS UI

Blur Amount

16px

Opacity (50%)

Saturation (180%)

Glass Color

hex

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

How to use this tool

Follow these steps to get the most out of the Glassmorphism Generator.

Adjust blur and transparency.

Change background color.

Copy the glass effect CSS.

The guide

GLASS UI

Blur Amount

16px

Opacity (50%)

Saturation (180%)

Glass Color

hex

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

The Frosted Glass Effect

Glassmorphism is a popular UI trend that creates a sense of hierarchy by mimicking translucent materials. It relies heavily on the backdrop-filter CSS property.

Key Characteristics

Translucency: Using background blur (backdrop-filter: blur()) to allow background elements to be visible but distinct.
Vivid Colors: Often paired with colorful, floating shapes in the background to emphasize the transparency.
Light Borders: A subtle semi-transparent white border mimics a glass edge.

Browser Support

This effect works in all modern browsers. We include the -webkit- prefix in the generated code to ensure maximum compatibility with Safari and iOS devices.