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

Demo image: Water Bottle

Creator

  • Jon Kantner

Programming language

  • HTML / CSS

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

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Demo image: 2021

Creator

  • Pieter Biesemans

Programming language

  • HTML / CSS (SCSS)

Information a code

2021

2021 card with CSS backdrop-filter.

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Brian Haferkamp

Programming language

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

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

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

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

Creator

  • Luciano Felix

Programming language

  • HTML (Pug) / CSS (Sass)

Information a code

Blurry Header

Progressive backdrop blur experiment.

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Image with Backdrop Effect

Creator

  • Bansal

Programming language

  • HTML / CSS

Information a code

Image with Backdrop Effect

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: shorthand.css, pattern.css

Creator

  • andrewnicholl

Programming language

  • HTML / CSS (SCSS)

Information a code

Backdrop Filter Example

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

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Jean David Herrera Guerrero

Programming language

  • HTML / CSS (SCSS)

Information a code

Backdrop Filter

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • ycw

Programming language

  • HTML (Pug) / CSS (Less)

Information 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…

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Frosted Glass

Creator

  • alphardex

Programming language

  • HTML / CSS (SCSS)

Information a code

Frosted Glass

backdrop-filter is awesome!

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

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

Creator

  • Andrej Sharapov

Programming language

  • HTML (Pug) / CSS (Stylus)

Information a code

backdrop-filter: blur & scroll-behavior: smooth

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Jouan Marcel

Programming language

  • HTML (Pug) / CSS (Sass)

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

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • ItsMeNatalie

Programming language

  • HTML / CSS (SCSS)

Information a code

backdrop-filter Example

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

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • @keyframers

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Blurred Blinds

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

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

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

Creator

  • Matt Smith

Programming language

  • HTML / CSS

Information a code

iOS-Style Transparency Effect in CSS With Backdrop-Filter

Playing with the backdrop-filter effect.

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Andreas Storm

Programming language

  • HTML (Pug) / CSS (Stylus)

Information a code

backdrop-filter Blur

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Demo image: backdrop-filter Using SVG Filter

Creator

  • Vincent De Oliveira

Programming language

  • HTML / CSS

Information a code

backdrop-filter Using SVG Filter

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: