AYONC / frosted-glass-effect

Simulating a webkit backdrop filter blur

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

#Frosted Glass Effect Messing around with a way to create the effect of blurring everything behind and element. Currently this is natively possible in Safari with a backdrop filter, but no other browsers support it.

This method duplicates everything that will be blurred, then uses either an svg or css filter to blur the contents, and then crops the container to the overlaying element's size with overflow hidden.

This is a rough initial concept. The root index page uses the effect with a draggable element. The nav-demo uses the effect in a flyout menu.

About

Simulating a webkit backdrop filter blur


Languages

Language:CSS 57.2%Language:JavaScript 24.9%Language:HTML 17.9%