CSS filter

Creator

Creator

Seonglae Cho

Created

Created

2021 Jun 9 8:31

Editor

Editor

Seonglae Cho

Edited

Edited

2025 Jun 11 23:11

Refs

Refs

Used with modal overlay

bad performance

blur filters are extremely heavy for your browser

CSS backdrop-filter

Next-level frosted glass with backdrop-filter • Josh W. Comeau

Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most realistic lush frosted glass anywhere on the internet.

Next-level frosted glass with backdrop-filter • Josh W. Comeau

https://www.joshwcomeau.com/css/backdrop-filter/

Next-level frosted glass with backdrop-filter • Josh W. Comeau

backdrop-filter - CSS: Cascading Style Sheets | MDN

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent.

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

backdrop-filter - CSS: Cascading Style Sheets | MDN

High quality usages

A complete guide to using CSS filters with SVGs - LogRocket Blog

Filters are extremely popular in photography. You can find them on nearly every photo editing app or website, and some cameras have inbuilt filter options so you don't have to edit the photos later. CSS has several filters that help improve the visual aspects of a website.

https://blog.logrocket.com/complete-guide-using-css-filters-svgs/

A complete guide to using CSS filters with SVGs - LogRocket Blog

Recommendations

//////////