Collection of free CSS backdrop-filter code examples from Codepen and other resources.

Related Articles

  1. CSS background-blend-mode Examples
  2. CSS background-clip Examples

Demo image: Water Bottle

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

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.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: 2021

Author

  • Pieter Biesemans

Made with

  • HTML / CSS (SCSS)

About a code

2021

2021 card with CSS backdrop-filter.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Brian Haferkamp

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

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.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: material-design-iconic-font.css, jquery.js

Author

  • Luciano Felix

Made with

  • HTML (Pug) / CSS (Sass)

About a code

Blurry Header

Progressive backdrop blur experiment.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Image with Backdrop Effect

Author

  • Bansal

Made with

  • HTML / CSS

About a code

Image with Backdrop Effect

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: shorthand.css, pattern.css

Author

  • andrewnicholl

Made with

  • HTML / CSS (SCSS)

About a code

Backdrop Filter Example

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

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jean David Herrera Guerrero

Made with

  • HTML / CSS (SCSS)

About a code

Backdrop Filter

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • ycw

Made with

  • HTML (Pug) / CSS (Less)

About a code

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...

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Frosted Glass

Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

About a code

Frosted Glass

backdrop-filter is awesome!

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: backdrop-filter: blur & scroll-behavior: smooth

Author

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

backdrop-filter: blur & scroll-behavior: smooth

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jouan Marcel

Made with

  • HTML (Pug) / CSS (Sass)

About a code

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.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • ItsMeNatalie

Made with

  • HTML / CSS (SCSS)

About a code

backdrop-filter Example

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

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS) / JS

About a code

Blurred Blinds

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

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: iOS-Style Transparency Effect in CSS With Backdrop-Filter

Author

  • Matt Smith

Made with

  • HTML / CSS

About a code

iOS-Style Transparency Effect in CSS With Backdrop-Filter

Playing with the backdrop-filter effect.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Andreas Storm

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

backdrop-filter Blur

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: backdrop-filter Using SVG Filter

Author

  • Vincent De Oliveira

Made with

  • HTML / CSS

About a code

backdrop-filter Using SVG Filter

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -