The backdrop-filter property applies effects like blur to everything behind an element. Combined with a semi-transparent background it creates the glass effect.

Glass card

.lotgrafix-glass {
    background: rgba( 255, 255, 255, 0.15 );
    backdrop-filter: blur( 12px );
    -webkit-backdrop-filter: blur( 12px );
    border: 1px solid rgba( 255, 255, 255, 0.25 );
    border-radius: 16px;
    padding: 24px;
}

Blurred sticky header

.lotgrafix-header {
    position: sticky;
    top: 0;
    background: rgba( 255, 255, 255, 0.7 );
    backdrop-filter: saturate( 180% ) blur( 10px );
    -webkit-backdrop-filter: saturate( 180% ) blur( 10px );
}

Available filter functions

• blur()
• brightness()
• contrast()
• grayscale()
• saturate()
• hue-rotate()

Notes

The element needs a background that is at least partly transparent, or the effect will not be visible. Large blur values can affect performance on low-end devices.