Backdrop filter

Water Bottle

Just some fun with backdrop-filter on a pure CSS cold water bottle. Thirsty yet? For some Firefox support, set layout.css.backdrop-filter.enabled and gfx.webrender.all to true in about:config, then restart the browser. However, the bottle may still not appear as expected.

2021

2021 card with CSS backdrop-filter.

Using the Backdrop Filter

Using the backdrop-filter we can create a filter layer when a modal is opened. Easily create the typical darkened background but you can also create some interesting effects by chaining filters.

Blurry Header

Progressive backdrop blur experiment.

Image with Backdrop Effect

Backdrop Filter Example

Replicate that super cool on trend background blur hotness with the backdrop-filter CSS property.

Backdrop Filter

Cells with backdrop-filter

By using overlaying-div-soups with backdrop-filter, its possible to apply fx on any underlying content, e.g. figure, list, details, headings...

Frosted Glass

backdrop-filter is awesome!

backdrop-filter: blur & scroll-behavior: smooth

Futuristic Button Styles (Fire & Ice)

Futuristic and organic button styles with hover effect. Uses the backdrop-filter effect for a slight frosty glass effect. CSS via Sass as preprocessor, HTML via Pug. No Javascript in use.

backdrop-filter Example

It's an example showcase of effects you can achieve thanks to backdrop-filter property.

Blurred Blinds

CSS-only loader animation tutorial with backdrop-filter: blur.

iOS-Style Transparency Effect in CSS With Backdrop-Filter

Playing with the backdrop-filter effect.

backdrop-filter Blur

backdrop-filter Using SVG Filter