Water Bottle

20.01.2021

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.

Made with: HTML,CSS

View Code

Water Bottle

2021

4.01.2021

2021 card with CSS backdrop-filter.

Made with: HTML,CSS (SCSS)

View Code

2021

Using The Backdrop Filter

30.09.2020

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.

Made with: HTML (Pug),CSS (Sass),JS

View Code

PlaceholderUsing The Backdrop Filter

Blurry Header

1.07.2020

Progressive backdrop blur experiment.

Made with: HTML (Pug),CSS (Sass)

View Code

PlaceholderBlurry Header

Image With Backdrop Effect

25.04.2020

Made with: HTML,CSS

View Code

Image With Backdrop Effect

Backdrop Filter Example

26.02.2020

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

Made with: HTML,CSS (SCSS)

View Code

PlaceholderBackdrop Filter Example

Backdrop Filter

13.02.2020

Made with: HTML,CSS (SCSS)

View Code

PlaceholderBackdrop Filter

Cells With Backdrop-Filter

4.01.2020

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

Made with: HTML (Pug),CSS (Less)

View Code

PlaceholderCells With Backdrop-Filter

Frosted Glass

17.11.2019

backdrop-filter is awesome!

Made with: HTML,CSS (SCSS)

View Code

Frosted Glass

Backdrop-Filter: Blur & Scroll-Behavior: Smooth

9.10.2019

Made with: HTML (Pug),CSS (Stylus)

View Code

Backdrop-Filter: Blur & Scroll-Behavior: Smooth

Futuristic Button Styles (Fire & Ice)

8.10.2019

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.

Made with: HTML (Pug),CSS (Sass)

View Code

PlaceholderFuturistic Button Styles (Fire & Ice)

Backdrop-Filter Example

6.09.2019

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

Made with: HTML,CSS (SCSS)

View Code

PlaceholderBackdrop-Filter Example

Blurred Blinds

7.08.2019

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

Made with: HTML,CSS (SCSS),JS

View Code

PlaceholderBlurred Blinds

Ios-Style Transparency Effect In Css With Backdrop-Filter

19.04.2016

Playing with the backdrop-filter effect.

Made with: HTML,CSS

View Code

Ios-Style Transparency Effect In Css With Backdrop-Filter

Backdrop-Filter Blur

30.03.2016

Made with: HTML (Pug),CSS (Stylus)

View Code

PlaceholderBackdrop-Filter Blur

Backdrop-Filter Using Svg Filter

18.08.2015

Made with: HTML,CSS

View Code

Backdrop-Filter Using Svg Filter