Frosted glass effects
Glassmorphism uses background blur and semi-transparent colors to create depth in a user interface. By allowing colorful underlying patterns or images to softly shine through, the frosted glass effect separates foreground elements without completely blocking the background.
Blur and transparency
The core of the effect relies on the backdrop-filter property combined with an alpha-channel background color (like rgba). Adjust the blur radius to control how heavily the background is diffused. Higher blur values create a thick, opaque glass appearance, while lower values keep the background pattern recognizable. The background opacity controls the tint of the glass itself.
Glare and depth
Real glass reflects light on its edges. The border glare slider adds a 1px solid, semi-transparent white border to the element to simulate this reflection and improve contrast against complex backgrounds. The shadow opacity slider grounds the element, creating a sense of elevation over the canvas.
CSS output and fallbacks
The generated output block provides the exact CSS background, backdrop-filter, border, and box-shadow values needed. While backdrop-filter is widely supported, it is best practice to ensure your background opacity is high enough that text remains readable if the browser fails to render the blur.